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 多行省略号为什么不生效？如何解决英文和中文内容的省略问题？的详细内容，更多请关注其它相关文章！