我在Reaction中有一个显示文本的组件.如果文本太长，我会将其截断为两行.我完全依赖于css来做到这一点.还有另一个按钮用于切换截断.以下是组件:
const [showFull, toggleShowFull] = useReducer((s) => !s, false);
const TruncatableText = styled("p", {
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,
lineHeight: 1.5,
maxHeight: "3em",
overflow: "hidden",
textOverflow: "ellipsis",
cursor: "pointer",
width: "100%",
variants: {
showFull: {
true: {
WebkitLineClamp: 1000,
maxHeight: "100%",
},
},
},
});
return (
<>
<TruncatableText showFull={showFull}>
{text}
</TruncatableText>
<Button onClick={toggleShowFull}>
{showFull ? "Hide Full Text" : "Show Full Text"}
</Button>
</>
)
以下是文本被截断的时间预览:
下面是文本展开时的预览:
现在，如果且仅当文本被截断时，我才要显示该按钮.
我想到了一个 idea ，我可以以某种方式获得显示在p标签上的字符数.我try 获取p标记的内部文本，但它给了我整个文本，即使它被截断了.有没有人可以帮助我，我怎样才能得到p个标签上可见的字符数？
或者有没有其他方法来做我想做的事？