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内联元素（跨度），它可以与块元素只能使用（DIV）

，并使用text-overflow: ellipsis;

检查这个时候使用white-space:nowrap;，我已经将您内部跨度的div只是概念验证

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

我不知道为什么你已经使用范围，但按照你的逻辑，你可以让昌ES我建议

更新：

有人会认为，在这个问题，如果我把white-space: nowrap;跨越元素则text-overflow: ellipsis:的工作，所以可能是我错了，但事实并非如此，因为提问者在span标签中使用了float: left，这意味着span标签将被转换为box块并像普通块级元素一样工作，这也是错误的，因为如果您需要块元素行为，则使用块级元素

参考：

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

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

Answer 2

添加white-space:nowrap;您.inner股利。

Answer 3

补充一点：

white-space:nowrap; 

到流式细胞元。长

那么溢出ellispsis作品。

Answer 4

我想你会发现问题是由文本对齐：center;