文本溢出:省略号无效,尽管使用了所有必需的css先决条件

时间:2015-03-12 16:18:48

标签: html css overflow

我无法弄清楚为什么文本溢出省略号属性在这里不起作用...

HTML:

<div class='overflowTest'>
   Long long long long long long text
</div>

和CSS:

.overflowTest {
   overflow: hidden; 
   white-space: no-wrap; 
   text-overflow: ellipsis; 
   background-color: red; 
   -webkit-border-radius: 12px; 
   -moz-border-radius: 12px; 
   border-radius: 12px; 
   margin:4px; 
   padding:4px; 
   width: 46%; 
   height:30px; 
   font-size: 12px; 
   padding-top:7px; 
   font-style: normal; 
   float: left; 
}

它有溢出设置为隐藏,白色空间为无包装,文本溢出为省略号,它也有给定宽度(尝试将其从百分比更改为固定数字,仍然不起作用),是什么我错过了?

这里也是一个小提琴: https://jsfiddle.net/9xhrs2nj/

1 个答案:

答案 0 :(得分:2)

nowrap中没有连字符。

Updated Example

应该是:

white-space: nowrap; 

而不是:

white-space: no-wrap;