CSS文本溢出省略号不显示

Question

我有一个内部内容的div,当它溢出时我需要省略号.我已经在其他元素上多次这样做了,但由于某种原因,这不符合预期.

另外,我white-space:nowrap;故意遗漏,因为内容然后没有突破到跨度内的下一行,因此我在省略号开始之前只看到2-3个单词.我希望文本跨越父容器的整个高度,然后为超出这些边界的内容启用省略号.

这是一个有效的演示:http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{
     position:absolute;
     font-size:12px;
     text-align:center;
     width:75px;
     height:75px;
     line-height:70px;
     border:1px solid #ccc;
}

.flow-element .inner{
     position:absolute;
     width:80%;
     height:80%;
     border:1px solid blue;
     top:0px;
     bottom:0px;
     left:0px;
     right:0px;
     margin:auto;
     text-align:center;
}

.flow-element .long{
     float:left;
     height:50px;
     width:100%;
     line-height:12px;
     border:1px solid red;  
     text-overflow:ellipsis;
     overflow:hidden;
}

HTML:

<a class='flow-element' style='top:100px; left:50px;'>
  <div class='inner'>
     <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
  </div>
</a>

有人可以请帮助.我需要在红色轮廓范围内显示尽可能多的文本,同时在文本内容溢出容器时有省略号...

提前致谢

Answer 1

你不能应用于text-overflow: ellipsis内联元素(span),它只能与块元素一起使用(div)

并在使用white-space:nowrap;时使用text-overflow: ellipsis;

检查一下,我已将你的内跨度转换为div,仅用于概念验证

http://jsfiddle.net/3CgcH/5/

我不知道你为什么使用span,但根据你的逻辑,你可以按照我的建议进行更改

更新:

有人会认为,如果我放入white-space: nowrap;span元素然后text-overflow: ellipsis:工作,那么可能是我错了,但事实并非如此,因为提问者float: left在span标签中使用了这意味着span标签将被转换为box block并且像普通的块级元素一样工作,这也是错误的事情,因为如果你需要块元素行为,那么使用块级元素

参考:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow