确定 Eclipse 是不是显示使用 -webkit-line-clamp 截断的文本

Posted 2023-03-07

【中文标题】确定 Eclipse 是不是显示使用 -webkit-line-clamp 截断的文本

【英文标题】：Determine if eclipse is showing for text truncated with -webkit-line-clamp确定 Eclipse 是否显示使用 -webkit-line-clamp 截断的文本

【发布时间】：2021-09-07 00:31:39

【问题描述】：

我有一个段落标签，我想检查 Eclipse 是否正在显示，但我使用的是 -webkit-line-clamp css 属性。

我有以下组件和钩子，但是使用宽度值不起作用。 scrollWidth、clientWidth 和 offsetWidth 的值始终相同。

const Description = ( data : Props) => 
  const [open, setOpen] = useState<boolean>(false);
  const ref = useRef<htmlParagraphElement>(null);
  const isTruncated = useIsTruncated(ref);

  return (
    <>
      <div className="my-3 max-h-[4.5rem] relative">
        <p ref=ref className="inline line-clamp-3">
          data.description
        </p>
        isTruncated && (
          <button
            className="text-blue-600 leading-none absolute bottom-0 right-0 font-medium"
            onClick=() => setOpen(true)
          >
            more
          </button>
        )
      </div>
      <Modal open=open setOpen=setOpen />
    </>
  );
;


const useIsTruncated = (element: RefObject<HTMLParagraphElement>) => 
  const determineIsTruncated = () => 
    if (!element.current) return false;
    return element.current.scrollWidth > element.current.clientWidth;
  ;
  const [isTruncated, setIsTruncated] = useState(determineIsTruncated());

  useEffect(() => 
    const resizeListener = () => setIsTruncated(determineIsTruncated());
    window.addEventListener("resize", resizeListener);
    return () => 
      window.removeEventListener("resize", resizeListener);
    ;
  , []);
  return isTruncated;
;

这可以使用-webkit-line-clamp吗？

---

我用的是tailwindcss，line-clamp-3的css是：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

【参考方案1】：

所以这个技巧是检查高度，而不是宽度。

const determineIsTruncated = () => 
  if (!element.current) return false;
  return element.current.scrollWidth > element.current.clientWidth;
;