使用CSS line-clamp时短词后接长词的截断异常问题

你可以使用overflow-wrap: break-word（兼容旧浏览器可追加word-wrap: break-word）来满足需求，这个属性仅会对超出容器宽度的长单词进行换行拆分，不会像word-break: break-all那样拆分短词。

修改后的CSS代码：

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 20px;
  background-color: #e5e5e5;
  overflow-wrap: break-word; /* 核心属性 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
}

对应的HTML保持不变：

<p>Lorem ipsum dolor sit amet, lalalal cat VeryLongLastWordThatShouldBePartVisibleButIsntBecauseCatBefore</p>

原理说明 #

• overflow-wrap: break-word的作用是：当单个单词长度超出容器宽度时，会将该单词拆分为多行显示，不会强行拆分短词；
• 搭配-webkit-line-clamp:2后，文本超过两行时会在第二行末尾显示省略号，同时长词的部分内容会正常显示在第二行，不会直接在前面的短词后截断。

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