简介
在本实验中,我们将学习如何截断超出其容器尺寸的多行文本。此技术对于显示较长文本的摘录同时保持简洁有序的设计很有用。通过使用诸如 overflow
、height
和 background
等 CSS 属性,我们可以创建一个视觉上令人愉悦的截断效果,从而提升用户体验。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何截断超出其容器尺寸的多行文本。此技术对于显示较长文本的摘录同时保持简洁有序的设计很有用。通过使用诸如 overflow
、height
和 background
等 CSS 属性,我们可以创建一个视觉上令人愉悦的截断效果,从而提升用户体验。
虚拟机中已经提供了 index.html
和 style.css
。
要截断超过一行的文本,请执行以下步骤:
overflow: hidden
防止文本超出其尺寸范围。400px
,以确保元素至少有一个固定尺寸。font-size * line-height * numberOfLines
(在本例中为 26 * 1.4 * 3 = 109.2
),将高度设置为 109.2px
。p
元素上添加类 truncate-text-multiline
。.truncate-text-multiline
类设置 font-size: 26px
和 line-height: 1.4
。color: #333
和 background: #f5f6f9
来设置文本样式。transparent
到 background-color
的渐变,请将以下 CSS 规则添加到 .truncate-text-multiline::after
伪元素:.truncate-text-multiline::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 36.4px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
这将创建一个高度为 36.4px
的渐变容器,该高度是根据公式 font-size * line-height
(在本例中为 26 * 1.4 = 36.4
)为渐变容器计算得出的。::after
伪元素位于 .truncate-text-multiline
元素的右下角。
请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“截断多行文本”实验。你可以在 LabEx 中练习更多实验来提升你的技能。