修剪多行文本

CSSCSSBeginner
立即练习

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

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

简介

在本实验中,我们将探索如何使用 CSS 将多行文本修剪为指定的行数。通过使用 -webkit-line-clamp 属性和其他相关的 CSS 属性,我们可以有效地限制文本块中显示的行数,使其在视觉上更具吸引力且更易于阅读。通过本实验,你将学习如何在你的网页设计项目中实现此技术。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") subgraph Lab Skills css/selectors -.-> lab-35223{{"`修剪多行文本`"}} css/box_model -.-> lab-35223{{"`修剪多行文本`"}} css/display_property -.-> lab-35223{{"`修剪多行文本`"}} end

修剪多行文本

你可以在 index.htmlstyle.css 中编写代码。

将多行文本限制为给定的行数。

  • 使用 -webkit-line-clamp 设置要显示的最大行数。
  • display 设置为 -webkit-box,并将 -webkit-box-orient 设置为 vertical,因为应用 -webkit-line-clamp 需要它们。
  • 应用 overflow: hidden 以在文本修剪后隐藏任何溢出内容。
<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

总结

恭喜你!你已完成“修剪多行文本”实验。你可以在 LabEx 中练习更多实验以提升你的技能。

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