ellipsis - 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)，它只能用于 block 元素 (div)

并且在使用 text-overflow: ellipsis;

时也使用 white-space:nowrap;

检查这个，我已经将你的内部跨度转换为 div，只是为了概念验证

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

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

更新:

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

引用:

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

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