这可不是兼容性问题哦，是你加的white-space: nowrap和多行省略的核心机制冲突啦！

问题根源 #

你用的-webkit-line-clamp实现多行省略，依赖的是display: -webkit-box弹性盒布局，以及文本正常换行的逻辑。但white-space: nowrap会强制所有文本在一行显示，完全抵消了多行布局的效果，自然就只会显示一行了。

解决方法 #

直接去掉white-space: nowrap，再补充两个属性保证不截断完整单词，修改后的CSS如下：

.clinic-description {
  font-family: OpenSans, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: center;
  margin-bottom: 16px;
  /* 新增：保证仅在单词边界换行，不截断完整单词 */
  word-break: keep-all;
  overflow-wrap: normal;
}

原理说明 #

• word-break: keep-all：让文本只在单词的自然分隔点（比如空格、连字符）换行，不会把一个完整的单词拆成两半显示。
• overflow-wrap: normal：默认值，不允许在单词内部强制换行，进一步确保完整单词不被截断。

小提醒：如果遇到像dolore12345678这种没有空格的长串字符，浏览器没办法识别它的单词边界，还是会被截断。如果要处理这种极端情况，可以把overflow-wrap改成break-word，但这样会允许长串字符内部换行，你可以根据实际需求调整。

内容的提问来源于stack exchange，提问作者Franco Echevarría