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

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

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