text-overflow: ellipsis;失效

Question

    /*css部分*/
    text-overflow: ellipsis;
    overflow: hidden;
    

理想效果应该是用三点来表示省略。但是效果如下（区域大小用边框已圈出，文本长度肯定是溢出了的）已
了多个浏览器的效果 都和下面一致

望指教

Answer 1

加上不让文字换行这个属性就可以了

/*css部分*/
    text-overflow: ellipsis;
    overflow: hidden;
    word-space:nowrap;

Answer 2

这个还必须设置不换行才能生效 white-space: nowrap
如果是需要超出多少行隐藏并以省略号显示的话，参考以下代码，但是仅在 -webkit- 内核浏览器生效

HTML

<p class="text-hide">...</p>

Style

.text-hide {
    -webkit-line-clamp: 2; /* 设置超出多少行隐藏 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 设置 display 为 -webkit-box 或者 -webkit-inline-box 时为隐藏状态 */
    display: -webkit-inline-box;
}

Answer 3

text-overflow，用来标记溢出内容如何显示，并不能强制文字溢出，要想让此属性生效，必须设置
{

overflow:hidde;
white-space:nowrap;

}
并且元素必须是块状元素，所以
{

display:block;//inline-block;

}
参考：
https://developer.mozilla.org...

Answer 4

你需要在一个块状元素里面，并且还要设置宽度，溢出才会有效果

Answer 5

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

// 不兼容ie和firefox
链接：http://hackingui.com/front-en...

Answer 6

overflow: hidden使当前元素BFC化。

text-overflow: ellipsis;
overflow: hidden;

Answer 7

算好距离，让后端套标签时限定字数，最后加个省略号就行了