英文:
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论