截断多行文本

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate 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.htmlstyle.css

要截断超过一行的文本,请执行以下步骤:

  1. 使用 overflow: hidden 防止文本超出其尺寸范围。
  2. 设置固定宽度为 400px,以确保元素至少有一个固定尺寸。
  3. 根据公式 font-size * line-height * numberOfLines(在本例中为 26 * 1.4 * 3 = 109.2),将高度设置为 109.2px
  4. 在 HTML 中的 p 元素上添加类 truncate-text-multiline
  5. 在 CSS 中为 .truncate-text-multiline 类设置 font-size: 26pxline-height: 1.4
  6. 设置 color: #333background: #f5f6f9 来设置文本样式。
  7. 要创建从 transparentbackground-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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程