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

Question

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

Answer 1

您想要的效果是用省略号截断的多行文本块。

很遗憾，这是不可能的。 text-overflow:ellipsis 仅适用于单行。它要求您指定white-space:nowrap（您已经这样做了），这会将整个文本强制放在一行中。

这是标准，适用于所有浏览器，所以我不知道您如何在 any 浏览器上获得所需的效果。它肯定不会在 IE 或我知道的任何其他当前浏览器中工作。

text-overflow 的扩展允许在多行文本上使用省略号，但它仅受 O​​pera 支持，因此几乎不值得一提。 （但如果你有兴趣，语法是text-overflow: -o-ellipsis-lastline）。

有一个纯CSS解决方案described here，但是有点复杂。不过可能值得一试。

您唯一的其他选择是某种 javascript 解决方案。

Answer 2

编辑 纠正自己；你需要有 CSS 溢出和宽度

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden

}