如何解决Expandbale 文本块中的三个点 React 和 JS
我想要的:
折叠(默认)块:
text text text
text text text
text text...
<Read more button>
<Read more button> onclick =>
text text text
text text text
text text text
text text text
<Read less button>
<Read less button> onclick => vice versa
我尝试过的:
我已经可以使用展开/折叠功能,但是如何在句子的最后一个单词结束的地方留下三个点? 尝试文本溢出:省略号;仅适用于空白:pre; 但是块只由一行最后三个点组成:
text text...
<Read more button>
我可以随意使用任何 JS 库(更好的 cdn 库)。但是原生 JS/react 解决方案将是最好的!
附注。 如果我可以问关于库/工具推荐的问题,我不是很清楚,所以如果我不被允许,那么请发表评论,我会编辑问题。
这是我的代码:
我正在使用 material-ui 排版,顺便说一下,有没有使用 material-ui 的组件的解决方案?
const Description = styled(Typography)`
overflow: hidden;
height: 128px;
margin-bottom: 16px;
`;
和组件:
<Container>
<Header variant="h4">{props.title}</Header>
<Description variant="body1">
<Trans i18nKey={props.description} />
</Description>
<Link
id="readmore"
onClick={(_e: React.SyntheticEvent) => {
if (opening) return;
setopening(true);
const target = _e.target as HTMLElement;
if (target.prevIoUsSibling) {
if (target.innerHTML === "Read more") {
console.log("opening more description");
const paragraph = target.prevIoUsSibling as HTMLElement;
paragraph.style.overflow = "visible";
paragraph.style.height = "auto";
target.innerHTML = "Read less";
} else {
console.log("closing more description");
const paragraph = target.prevIoUsSibling as HTMLElement;
paragraph.style.overflow = "hidden";
paragraph.style.height = isDesktop ? "72px" : "128px";
target.innerHTML = "Read more";
}
setopening(false);
}
}}
>
Read more
</Link>
</Container>
我也可以考虑不使用任何 js,只使用 React 来重写该代码块,所以我询问任何 React 或 JS 解决方案。
重要提示!
文本可能会改变,因为您可以看到它是一个可重复使用的组件,并且块的宽度会根据视口的宽度而变化。这就是为什么我正在寻找一个 JS 解决方案,而不是仅仅用类包装最后一行,比如用三个点来结束。我正在寻找一种算法来确定将块折叠到的最后一行。
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。