截断多行文本：实用的 CSS 技巧

简介

在本实验中，我们将学习如何截断超出其容器尺寸的多行文本。此技术对于显示较长文本的摘录同时保持简洁有序的设计很有用。通过使用诸如 overflow、height 和 background 等 CSS 属性，我们可以创建一个视觉上令人愉悦的截断效果，从而提升用户体验。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35252{{"截断多行文本"}} css/colors -.-> lab-35252{{"截断多行文本"}} css/text_styling -.-> lab-35252{{"截断多行文本"}} css/width_and_height -.-> lab-35252{{"截断多行文本"}} css/positioning -.-> lab-35252{{"截断多行文本"}} css/backgrounds -.-> lab-35252{{"截断多行文本"}} css/pseudo_elements -.-> lab-35252{{"截断多行文本"}} end

截断多行文本

虚拟机中已经提供了 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 中练习更多实验来提升你的技能。