[分享]css两行文字省略号bug

最近在做前端页面开发时，发现了一个奇怪的问题：两行文字在使用CSS设置省略号时出现了异常，只显示了一个省略号。/ CSS样式 / .ellipsis { width: 200px; overflow:...

最近在做前端页面开发时，发现了一个奇怪的问题：两行文字在使用CSS设置省略号时出现了异常，只显示了一个省略号。

/* CSS样式 */
.ellipsis {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} 

代码中的CSS样式非常常见，用于对长文字进行省略号处理。但是，当两行文字同时使用该样式时，出现了只显示一个省略号的bug。

经过搜索和尝试，发现了这个问题的原因：CSS样式设置了white-space属性为nowrap，这会使得两行文本合并成一行文本，因此只显示了一个省略号。

如果想要正确地进行两行文字省略号处理，可以设置word-wrap属性为break-word：

/* 修复bug后的CSS样式 */
.ellipsis {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
} 

通过设置white-space属性为normal和word-wrap属性为break-word即可修复该bug。在进行长文字省略号处理时，一定要注意文本的换行情况，以免出现类似的问题。