英文:
Shrink / collapse overflowing text
问题
请检查附加的图像。正如您所见，文本溢出到div之外。我只想折叠溢出的文本，并在最后显示“阅读更多”。当用户点击“阅读更多”时，文本应扩展。
我正在进行一个Next.js项目。
我的要求是将文本折叠到指定的行，而不是从指定的行中断文本。
英文:
Please check the attached image. As you can see, text is overflowing outside the div. I just want to collapse the overflowing text and display "Read more" in the end. While user click "read more" text should be expanded.
I'm working on a next js project.
My requirement is to collapse the text to specified lines not to break the text from specified lines.
答案1
得分: 2
Create a Card component like this:
export default function Card() {const [expand, setExpand] = useState(false);return (<div><div className={`${style.collapsible_text} ${expanded ? '' : style.collapsed}`}>{/* Card text goes here */}</div><p onClick={() => setExpand(!expand)}>{expand? "read more..." : "read less..."}</p></div>);}
Then, apply the following CSS to the Card component:
.collapsible_text {max-height: 50px;overflow: hidden;}.collapsed {max-height: 50px;}
英文:
Create a Card component like this:
export default function Card() {const [expand, setExpand] = useState(false);return (<div><div className={`${style.collapsible_text} ${expanded ? '' : style.collapsed}`}>{/* Card text goes here */}</div><p onClick={() => setExpand(!expand)}>{expand? "read more..." : "read less..."</p></div>);}
Then, apply the following css to the Card component:
.collapsible_text {max-height: 50px;overflow: hidden;}.collapsed {max-height: 50px;}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论