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:正在工作，那么我可能错了，但事实并非如此，因为提问者已使用{{1在span标记中，这意味着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 div。

Answer 3

添加：

white-space:nowrap;

到.flow-element .long

然后溢出 - ellispsis工作。

Answer 4

我认为您会发现问题是由text-align：center;

引起的

CSS文本溢出省略号不显示

4 个答案: