使用display:-webkit-box时，含连续!符号的text-overflow:ellipsis失效求助

问题说明 #

使用以下CSS实现两行文本省略效果时，当文本包含连续无意义符号（如!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!），text-overflow: ellipsis无法正常显示省略号。移除display: -webkit-box或文本无连续特殊符号时功能正常，但需保留两行显示需求。

div.b {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  line-height: 16px;
  white-space: normal;
}

修复方案 #

问题根源是word-break: break-all与-webkit-line-clamp的兼容性冲突，连续特殊符号会被强制断行，导致省略号逻辑失效。调整如下：

• 移除word-break: break-all，替换为overflow-wrap: break-word
• 清理重复定义的CSS属性，避免样式解析冲突

优化后的CSS代码：

div.b {
  width: 50px;
  border: 1px solid #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px;
  overflow-wrap: break-word;
}

原理说明 #

overflow-wrap: break-word会在单词或连续符号内部进行合理断行，既满足长文本换行需求，又不会像break-all那样强制拆分破坏省略号触发逻辑，确保-webkit-line-clamp能正常识别行数以显示省略号。

内容的提问来源于stack exchange，提问作者Vo Thanh Tung