CSS + JS 实现多行文本省略及省略时显示提示？我滴嘭友，敲简单的啦！

最近做一个需求时遇到要实现多行文本省略的功能，同时要求仅在文本溢出且鼠标移入时才显示文字提示。
我滴嘭友，敲简单的啦！

我滴实现方式（仅仅代表我自己）

• CSS -webkit-box 实现多行省略
• scrollHeight > clientHeight 判断是否高度溢出

CSS 实现多行省略

使用-webkit-box实现，依赖WebKit私有属性，Firefox等非WebKit浏览器不支持。

.rows-text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical; /* 设定弹性盒子的子元素（文本行）按垂直方向堆叠排列 */
    -webkit-line-clamp: 3; /* 限制显示行数，WebKit私有属性，支持Chrome/Safari等 */
    line-clamp: 3; /* 标准属性，用于未来兼容性，目前仍需前缀属性支持 */
    overflow: hidden; /* 隐藏超出容器边界的内容，确保被截断的文本不可见 */
    text-overflow: ellipsis; /* 文本溢出容器时，末尾显示省略号（`…`） */
    word-break: break-word; /* 避免长单词/URL溢出 */
}

判断是否高度溢出

使用 React + antd 来进行演示，style.less文件内容就是上面的 CSS实现多行省略 的内容。

import React, { useRef, useState } from 'react';
import { Tooltip } from 'antd';

import styles from './style.less';

const TextEllipsis = ({ text }) => {
  const textRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  // 检测文本是否溢出
  const checkOverflow = () => {
    if (textRef?.current) {
      setIsOverflowing(
        (textRef?.current?.scrollHeight || 0) >
            (textRef?.current?.clientHeight || 0),
      );
    }
  };

  return (
    <Tooltip
      title={isOverflowing ? text : null}
      placement="topLeft"
    >
      <div
        ref={textRef}
        className={styles?.['rows-text-ellipsis']}
        onMouseEnter={checkOverflow}
      >
        { text }
      </div>
    </Tooltip>
  );
};

export default TextEllipsis;