如何仅在文本从 div 溢出时在 reactjs 中使用纯 css javascript 显示更多内容

Question

我有一个获取动态文本的组件。当文本超出 div 的宽度时，我显示省略号。现在，我正在显示show more，当用户点击它时，我正在显示整个文本并显示show less 链接。

import React from "react";
import "./styles.css";

export default function App(props) {
  const [showMore, setShowMore] = React.useState(true);
  const onClick = () => {
    setShowMore(!showMore);
  }
  return (
    <>
      <div className={showMore ? '' : "container"}>{props.text}</div>
      <span className="link" onClick={onClick}>{showMore ? 'show less' : 'show more'}</span>
    </>
  );
}

.container {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block !important;
  width: 250px;
  background-color: #eaeaea;
}

即使文本没有溢出，上面的代码也会显示show more 链接。

但我只想在文本溢出时显示show more 链接。我怎样才能做到这一点？

编辑

从 crays 的评论中我发现了这个 stackoverflow anwser

现在，我尝试使用 ref 来访问以下样式

import React from "react";
import "./styles.css";

export default function App(props) {
  const [showMore, setShowMore] = React.useState(false);
  const onClick = () => {
    setShowMore(!showMore);
  };

  const checkOverflow = () => {
    const el = ref.current;
    const curOverflow = el.style.overflow;

    if ( !curOverflow || curOverflow === "visible" )
        el.style.overflow = "hidden";

    const isOverflowing = el.clientWidth < el.scrollWidth 
        || el.clientHeight < el.scrollHeight;

    el.style.overflow = curOverflow;

    return isOverflowing;
  };

  const ref = React.createRef();

  return (
    <>
      <div ref={ref} className={showMore ? "container-nowrap" : "container"}>
        {props.text}
      </div>
      {(checkOverflow()) && <span className="link" onClick={onClick}>
        {showMore ? "show less" : "show more"}
      </span>}
    </>
  )
}

我也尝试过使用forwardref

export const App = React.forwardRef((props, ref) => {
  const [showMore, setShowMore] = React.useState(false);
  const onClick = () => {
    setShowMore(!showMore);
  };

  const checkOverflow = () => {
    const el = ref.current;
    const curOverflow = el.style.overflow;

    if (!curOverflow || curOverflow === "visible") el.style.overflow = "hidden";

    const isOverflowing =
      el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

    el.style.overflow = curOverflow;

    return isOverflowing;
  };

  return (
    <>
      <div ref={ref} className={showMore ? "container-nowrap" : "container"}>
        {props.text}
      </div>
      {checkOverflow() && (
        <span className="link" onClick={onClick}>
          {showMore ? "show less" : "show more"}
        </span>
      )}
    </>
  );
});

但我收到一个错误Cannot read property 'style' of null

Answer 1

查看this article，它使用“checkbox hack”来实现。

Answer 2

我认为您可能会采用另一种方法，而不是依赖于浏览器内部视觉上发生的事情

假设文本仅在您拥有超过 N 个字符（您自己定义此数字）时才会溢出，例如 100 个字符

import {useState} from 'react';

export const Accordion = ({ text, limit = 100 }) => {
  const isExpandable = text.length > limit;
  const [viewText, setViewText] = useState(
    isExpandable ? text.slice(0, limit) : text
  );
  const isExpanded = text.length === viewText.length;
  return (
    <>
      <p>{viewText}</p>
      {isExpandable && (
        <button
          onClick={() => setViewText(isExpanded ? text.slice(0, limit) : text)}
        >
          {isExpanded ? "show less" : "show more"}
        </button>
      )}
    </>
  );
};

代码沙盒链接here