17

我有一个包含一些内部内容的 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>

有人可以帮忙吗。当文本内容溢出容器时，我需要在红色轮廓范围内显示尽可能多的文本，同时使用省略号...

提前致谢

4

4 回答 4

40

您不能应用于text-overflow: ellipsis内联元素（跨度），它只能与块元素（div）一起使用

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

检查一下，我已将您的内部跨度转换为 div，仅用于概念证明

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

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

更新：

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

参考：

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

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

于 2012-03-29T18:54:26.433 回答
1

添加这个：

white-space:nowrap;

到 .flow-element .long

然后溢出省略号起作用。

于 2012-03-29T18:56:08.063 回答
1

我想你会发现问题是由 text-align: center; 引起的。

于 2013-03-22T21:31:17.133 回答
0

添加white-space:nowrap;到您的 .inner div。

于 2012-03-29T18:54:01.173 回答