如果DIV包含一个较长的句子,例如“如果我每次被告知我不能获得一分钱”,我想显示:
|if i had a dime for|
|everytime i was... |
通过使用下面的代码,它在IOS和Android中工作正常,但它不能在Windows(IE 10)中工作,请帮助我。
<table>
<tr>
<td width="80%">
<div style="width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none;font-size:14px;">
if i had a dime for everytime i was told i can't
</div>
</td>
<td width="20%">
<img src=""/>
</td>
</tr>
答案 0 :(得分:0)
您想要的效果适用于使用省略号切断的多行文本块。
不幸的是,这是不可能的。 text-overflow:ellipsis
仅适用于单行。它要求您指定white-space:nowrap
(您已经完成)并强制将整个文本放在一行上。
这是标准并适用于所有浏览器,因此我不知道您是如何在任何浏览器上获得所需效果的。它当然不适用于IE或我所知道的任何其他当前浏览器。
text-overflow
有一个扩展,它允许对多行文本进行省略,但它只受Opera支持,因此几乎不值得一提。 (但如果您感兴趣,语法为text-overflow: -o-ellipsis-lastline
)。
有一个纯CSS解决方案described here,但它有点复杂。不过可能值得一试。
您拥有的唯一其他选择是某种javascript解决方案。
答案 1 :(得分:0)
修改 纠正自己;你需要有CSS溢出和宽度
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}