文本溢出省略号在Windows中不起作用(IE 10)

时间:2013-08-28 10:30:42

标签: javascript html css windows ellipsis

如果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>

2 个答案:

答案 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

}