使用 CSS 将文本长度限制为 N 行

使用-webkit-line-clamp

在Web开发过程中，有时我们需要限制文本长度或者限制一段文本显示的行数。

限制一段文本显示行数的常用方法之一是使用属性 -webkit-line-clamp。此属性允许我们指定文本应显示的最大行数。

要使用此方法，我们需要为要限制的文本元素指定以下属性：

div {
  display: -webkit-inline-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• display: -webkit-inline-box：将文本元素转换为行内框。这有助于确保文本显示在一行中。
• overflow: hidden：隐藏切断的文本行。
• -webkit-line-clamp: 2：指定文本应显示的最大行数。具体来说，这里有 2 行。
• -webkit-box-orient: vertical：将行内框转换为垂直框。这有助于确保文本垂直显示。

例如，将文本段落限制为 <div> 有两条线。如果文本长度超过 2 行，则会将其剪切并插入到 3 个点“...”之前。

见笔 将文本长度限制为 N 行 通过阿特鲁 (@artrublog) on 代码笔.

webkit-line-clamp方法的优点

此方法非常简单且易于使用。

此方法可用于限制任何文本片段中显示的行数，无论该文本元素的宽度或高度如何。

webkit-line-clamp方法的缺点

特性 -webkit-line-clamp 跨浏览器不完全兼容 100%。不过，主流浏览器仍然支持它。

此方法可能无法在默认字体较小的浏览器上正常工作。

得出结论

方法 -webkit-line-clamp 是限制文本段落中显示行数的有效方法。这种方法比较简单易用，可以应用于任何文本元素。