如何判断多行折行后是否被截断(显示省略号)

大致思路是：用一个绝对定位的隐藏的div作为对照，如过高度超过两行时的高度，则视为被截断。判断是否超过两行：

.title-container {
  width: 64px;
  height: 32px;

  font-family: PingFangSC;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0px;
  color: #ffffff;

  .title {
    .line-clamp(2);
  }

  .hidden-div {
    .line-clamp(3);
    position: absolute;
    width: 64px;
    visibility: hidden;
  }
}

.line-clamp(@line) {
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}

demo:
```tsx

interface IFileTitleProps {
  title: string;
  style?: React.CSSProperties;
}

const MAX_HEIGHT = 32;

const FileTitle: React.FC<IFileTitleProps> = (props) => {
  const { title, style: propsStyle } = props;

  const hiddenDivRef = useRef<HTMLDivElement>(null);
  const [showTooltip, setShowTooltip] = useState<boolean>(false);

  useEffect(() => {
    if (hiddenDivRef.current && hiddenDivRef.current.clientHeight > MAX_HEIGHT) {
      setShowTooltip(true);
    }
  }, [title]);

  return (
    <div className="xtable-file-title-container" style={propsStyle}>
      <div className="hidden-div" ref={hiddenDivRef}>
        {title}
      </div>

      {showTooltip ? (
        <Tooltip message={title}>
          <div className="title">{title}</div>
        </Tooltip>
      ) : (
        <div className="title">{title}</div>
      )}
    </div>
  );
};

981377660LMT / ts

如何判断多行折行后是否被截断(显示省略号) #460