css中多行省略号不生效的问题?

Question

为什么全是字母多行省略不生效

.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>

文字多行省略生效

.item {
    width: 100px;
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    }
<div class="item">
    哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚
</div>

Answer 1

你把内容改成中文就能正常显示省略号，说明这个CSS是没问题的，只是英文会出问题，因为英文你这又没有空格区分单词，浏览器会认为这是一个单词，不拆分单词，就成这样了，你在加个word-break: break-all;这一句，拆分单词强制换行就能正常显示省略号了，或者你不加这句，在内容里用空格区分好正常的单词，也是可以正常显示的

Answer 2

加上这个word-break: break-all;