CSS line-clamp设置行数限制后仍显示多余文本问题排查

你的问题核心是自定义的line-clamp-3类未正确生效，导致文本未被严格限制在3行内，主要有两个常见原因：

原因1：-webkit-box-orient: vertical被忽略或覆盖 #

-webkit-line-clamp依赖-webkit-box-orient: vertical来设置文本的垂直排列方式，但这个非标准属性可能被浏览器优化机制、CSS压缩工具，或者页面中其他优先级相当的样式规则覆盖，直接导致行数限制逻辑失效。

原因2：选择器优先级不足 #

如果页面中存在针对<p>元素的全局样式（比如全局设置了-webkit-box-orient: horizontal），你的类选择器.line-clamp-3优先级不足以覆盖全局样式，会导致垂直排列规则无法生效。

解决方法 #

方法1：强制生效垂直排列属性 #

给-webkit-box-orient: vertical添加!important声明，强制浏览器应用该规则：

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

方法2：提高选择器优先级 #

通过指定元素类型+类名的组合选择器，提升优先级，避免被全局样式覆盖：

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

方法3：补充文本溢出样式（可选） #

添加text-overflow: ellipsis确保截断处显示省略号，优化视觉效果：

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

内容的提问来源于stack exchange，提问作者Tom