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

什么是文本长度限制

文本长度限制是指通过 CSS 样式设置，将文本内容在指定的区域内显示一个固定的行数，超出行数部分则显示省略号（...）或者隐藏。限制文本的长度是为了美化页面布局、控制页面内容、提高用户体验等方面的目的。

如何实现文本长度限制

使用 text-overflow 属性

text-overflow 属性可以让超出盒子的文本内容显示省略号（...）或者自定义字符串。

.text-overflow{
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
}

上述代码中，设置了 text-overflow 属性为 ellipsis，表示文本超出后显示省略号；同时设置了 white-space 属性为 nowrap，表示文本不换行；overflow 属性设置为 hidden，表示超出部分会被隐藏。

但是，该方法只能实现单行文本的省略，无法限制多行文本的长度。如果需要对多行文本进行限制，则需要使用其他属性。

使用行高实现多行文本限制

使用行高实现多行文本的长度限制需要考虑多个因素，包括行高、字号、行数等。以下是一种比较可行的解决方案：

.line-clamp{
  display: -webkit-box; /* 使用旧版的多列布局 */
  -webkit-line-clamp: 3; /* 最多显示文本3行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 超出部分隐藏 */
}

上述代码中，使用了旧版的多列布局（-webkit-box），并且设置了最多显示3行文本（-webkit-line-clamp: 3）。同时还设置了排列方向为垂直（-webkit-box-orient: vertical），超出部分隐藏（overflow: hidden）。

需要注意的是，该方法只适用于支持 WebKit 内核的浏览器。

使用伪元素实现多行文本限制

使用伪元素实现多行文本限制也是一种比较常用的方法。该方法依赖于伪元素的特性，通过创建一个伪元素的容器，限制文本显示的行数。

.multi-line-clamp{
  position: relative; /* 相对定位 */
  line-height: 1.4em; /* 设置行高 */
  max-height: 4.2em; /* 最大高度为三行 */
  overflow: hidden; /* 超出部分隐藏 */
}
.multi-line-clamp::after{
  content: "...";
  position: absolute; /* 绝对定位 */
  right: 0; /* 位于盒子右侧 */
  bottom: 0; /* 位于盒子底部 */
}

上述代码中，首先设置了多行文本的样式，包括行高、最大高度、超出部分隐藏。同时还创建了一个伪元素容器，用于显示省略号。

需要注意的是，该方法需要手动计算出最大显示行数的高度。

如何选择不同的文本长度限制方法

选择不同的文本长度限制方法，需要根据页面的具体情况来判断，包括要求的行数、适配的浏览器等因素。

如果只需要实现单行文本的省略，那么使用 text-overflow 属性就可以满足要求；如果需要实现多行文本的长度限制，可以根据浏览器兼容性选择使用行高、伪元素等方法。

当然，还可以根据实际需求选择其他的方法，比如使用 JavaScript 等编程语言实现动态文本长度限制等。

总结

文本长度限制是网页设计中常用的一种技巧，可以美化页面布局、控制页面内容、提高用户体验等方面发挥作用。选择实现文本长度限制的方法需要根据页面要求、浏览器兼容性等具体情况来判断。

常用的文本长度限制方法包括使用 text-overflow 属性实现单行文本省略、使用行高、伪元素等方法实现多行文本长度限制。在应用这些方法时，需要注意字符编码、使用浏览器前缀、手动计算最大高度等问题。