简介
在本实验中，我们将学习如何截断超出其容器尺寸的多行文本。此技术对于显示较长文本的摘录同时保持简洁有序的设计很有用。通过使用诸如 overflow、height 和 background 等 CSS 属性，我们可以创建一个视觉上令人愉悦的截断效果，从而提升用户体验。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 93%。获得了学习者 89% 的好评率。
截断多行文本
虚拟机中已经提供了 index.html 和 style.css。
要截断超过一行的文本，请执行以下步骤：
- 使用
overflow: hidden防止文本超出其尺寸范围。 - 设置固定宽度为
400px，以确保元素至少有一个固定尺寸。 - 根据公式
font-size * line-height * numberOfLines（在本例中为26 * 1.4 * 3 = 109.2），将高度设置为109.2px。 - 在 HTML 中的
p元素上添加类truncate-text-multiline。 - 在 CSS 中为
.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 中练习更多实验来提升你的技能。