-webkit-line-clamp 未正常截断求助：省略号后仍显示文本

你的CSS代码缺少实现多行文本省略的核心属性，这就是省略号显示后超出内容依然可见的原因。要让-webkit-line-clamp生效，必须搭配以下关键属性：

• display: -webkit-box;：将元素声明为WebKit盒模型，这是后续属性生效的基础
• -webkit-box-orient: vertical;：指定盒内元素垂直排列，确保按行数截断
• -webkit-line-clamp: 4;：限制文本最多显示4行
• overflow: hidden;：隐藏超出容器的内容
• text-overflow: ellipsis;：在截断处显示省略号

修正后的完整CSS代码 #

text-align: justify;
margin: 0 0 8px; /* 简化重复的margin声明 */
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
line-height: 1.2;
/* 新增核心属性 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;

额外注意事项 #

1. 不要给该元素设置float或position: absolute，否则WebKit盒模型的截断逻辑可能失效；若必须用定位，需给父容器设置合适的高度约束
2. 确保元素没有被white-space: nowrap这类样式覆盖，该属性会强制文本单行显示，与多行截断逻辑冲突
3. 若问题仍存在，检查父容器是否有overflow: visible或其他导致内容溢出的属性，必要时给父容器也添加overflow: hidden

内容的提问来源于stack exchange，提问作者Rasmus Krogh-Andersen