css 中多行省略号不生效的解决方案
在 css 中使用 text-overflow: ellipsis 通常可以实现多行文字的省略显示。但是，在某些情况下，此属性可能不会生效。
英文内容无效
当多行文字包含英文时，省略号可能无法生效。这是因为英文单词通常不包含空格分隔符。浏览器会将所有字符视为一个单词，导致无法识别单词边界并进行省略。
立即学习“前端免费学习笔记（深入）”；
.item {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
abcdefghijhlmnljjasufoqwhfesadhfjasdflasdjfalsfjla;skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf
解决方案
要解决此问题，可以采用以下方法：
- 添加 word-break: break-all; 样式：此样式将强制浏览器拆分单词，即使没有空格。
.item {
word-break: break-all;
/* 其余样式同上 */
}- 在内容中添加空格：在英文单词之间添加空格分隔符也能解决问题。
abcdefghijhlmnljjasufoqwhfesadhfjasdf lasdjfalsfjla; skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf
中文内容有效
当多行文字包含中文时，省略号通常会正常生效。这是因为中文不使用空格分隔词语，浏览器可以自动识别字符边界。
.item {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚
