使用 css 将文本长度限制为 n 行

要在 CSS 中将文本长度限制为 n 行，一种常见的做法是使用 line-clamp 特性，但需要注意的是，line-clamp 是一个现代浏览器支持的非标准特性，属于 CSS Overflow Module的一部分。这种方法的好处是它允许文本在达到指定的行数限制后显示省略号（...），这样可以向用户清晰地表明文本已被截断。

假设我们想将一个段落的文本限制为3行，我们可以使用以下 CSS 代码：

css
p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在这个例子中，先设置 display: -webkit-box 启用弹性盒子布局；接着，使用 -webkit-line-clamp: 3 来定义文本行数的最大限制为3行；然后，设置 -webkit-box-orient: vertical 让内容垂直展开；最后，设置 overflow: hidden 与 text-overflow: ellipsis 来确保超出部分被隐藏，并且在内容末尾显示省略号。

我在实际项目中曾使用过这种方法，以确保新闻摘要或用户评论在不同设备上具有一致的外观并且不会占用太多空间。这样的处理提升了页面布局的整洁性并改善了用户体验。不过，需要注意的是 -webkit-line-clamp 主要在基于 WebKit/Blink 的浏览器上工作（比如 Chrome、Safari），尽管如今大多数现代浏览器都支持这一特性，但在使用时仍需考虑向后兼容性。

以下 CSS 类将文本限制为两行，并插入省略号以指示溢出的文本。

shell
.two-line-ellipsis {
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="two-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ex sit amet diam efficitur pellentesque. Mauris posuere scelerisque libero, nec pretium mauris molestie non. Nulla aliquam sollicitudin egestas. Fusce aliquet elit vitae mi volutpat vehicula.
  Vestibulum vel sapien enim. Nulla eu volutpat ex, ac faucibus urna. Etiam mattis rutrum ullamcorper. Ut sagittis, erat sit amet vulputate commodo, nisl lacus aliquet magna, vel condimentum ante felis rutrum nibh. Suspendisse ut lorem rutrum, molestie
  velit eget, hendrerit lorem. Vivamus rutrum nunc elit, nec lacinia risus viverra ut.</div>

可以使用非官方的line-clamp语法来完成此操作，并且从 Firefox 68 开始，它适用于所有主要浏览器。

css
body {
   margin: 20px;
}

.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

除非你关心IE用户，否则没有必要使用 line-height和 max-height来实现需求。