[英]Determine if ellipsis is showing for text truncated with -webkit-line-clamp
I have a paragraph tag I am wanting to check if the ellipsis is showing, but I am using the -webkit-line-clamp
css property.我有一个段落标签,我想检查省略号是否显示,但我使用的是
-webkit-line-clamp
css 属性。
I have the following component and hook, however using width values doesn't work.我有以下组件和钩子,但是使用宽度值不起作用。 The values for
scrollWidth
, clientWidth
and offsetWidth
are always the same value. 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;
};
Is this possible using -webkit-line-clamp
?这可以使用
-webkit-line-clamp
吗?
I am using tailwindcss, the css for line-clamp-3
is:我正在使用tailwindcss,
line-clamp-3
的css是:
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
So the trick with this was to check the height, not width.所以这个技巧是检查高度,而不是宽度。
const determineIsTruncated = () => {
if (!element.current) return false;
return element.current.scrollHeight > element.current.clientHeight;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.