文本溢出省略号是不是在Windows（IE 10）

工作如果DIV包含一个长句子，比如“如果我对每次我被告知我不能一毛钱”，我想显示：文本溢出省略号是不是在Windows（IE 10）

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

来源

2013-08-28 user2677473

参见：http://stackoverflow.com/questions/6572330/is-it-possible-to-use- text-overflowellisis-on-multiline-text – Spudley

你想要的效果是对于以省略号切断多行文本块。

不幸的是，这是不可能的。 text-overflow:ellipsis只适用于单行。它要求你指定white-space:nowrap（你已经完成了），并强制整个文本到一行。

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

有一个text-overflow的扩展名，它允许在多行文本上使用省略号，但它只被Opera支持，所以它几乎不值一提。（但如果你有兴趣，语法是text-overflow: -o-ellipsis-lastline）。

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

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

来源

2013-08-28 10:38:11 Spudley

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

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

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

}

来源

2013-08-28 10:40:05 webslatesoftware

谢谢，但我需要它在第二行，请检查http://jsfiddle.net/kaJ3L/874/ – user2677473

@ user2677473 - 它不能在多线使用标准CSS。 'text-overflow：ellipsis'明确地被设计为一行。 – Spudley

好的，我们有使用JavaScript的解决方案吗？如果是这样，你能分享吗？ – user2677473

文本溢出省略号是不是在Windows（IE 10）

回答

相关问题