CSS 多行省略号为什么不生效？如何解决英文和中文内容的省略问题？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS 多行省略号为什么不生效？如何解决英文和中文内容的省略问题？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

css 中多行省略号不生效的解决方案

在 css 中使用 text-overflow: ellipsis 通常可以实现多行文字的省略显示。但是，在某些情况下，此属性可能不会生效。

英文内容无效

当多行文字包含英文时，省略号可能无法生效。这是因为英文单词通常不包含空格分隔符。浏览器会将所有字符视为一个单词，导致无法识别单词边界并进行省略。

.item {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<div class="item">
  abcdefghijhlmnljjasufoqwhfesadhfjasdflasdjfalsfjla;skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf
</div>

解决方案

要解决此问题，可以采用以下方法：

• 添加 word-break: break-all; 样式：此样式将强制浏览器拆分单词，即使没有空格。

.item {
  word-break: break-all;
  /* 其余样式同上 */
}

• 在内容中添加空格：在英文单词之间添加空格分隔符也能解决问题。

<div class="item">
  abcdefghijhlmnljjasufoqwhfesadhfjasdf lasdjfalsfjla; skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf
</div>

中文内容有效

当多行文字包含中文时，省略号通常会正常生效。这是因为中文不使用空格分隔词语，浏览器可以自动识别字符边界。

.item {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<div class="item">
  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚
</div>

好了，本文到此结束，带大家了解了《CSS 多行省略号为什么不生效？如何解决英文和中文内容的省略问题？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！