修剪多行文本：用 CSS 提升可读性

简介

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

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

修剪多行文本

你可以在 index.html 和 style.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 中练习更多实验以提升你的技能。