javascript - 文本溢出省略号在 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

Your desired effect is for a multi-line text block that cuts off with an ellipsis.

Unfortunately, this isn't possible. text-overflow:ellipsis only works on a single-line. It requires you to specify white-space:nowrap (which you have done) and that forces the entire text onto a single line.

This is the standard and applies to all browsers, so I don't know how you're getting the desired effect on any browser. It certainly won't work in IE or any other current browser that I'm aware of.

There is an extension to text-overflow that allows an ellipsis on multi-line text, but it's only supported by Opera, so it's hardly worth mentioning. (but in case you are interested, the syntax is text-overflow: -o-ellipsis-lastline).

There is a pure CSS solution described here, but it's a bit complex. It might be worth a try though.

The only other option you have is some sort of javascript solution.

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

}