HTML_ Ellipsis_ <td> <pre>

Question

我对这件事非常好奇。

<table border="1">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>

<tr>
<td>
    <pre style="text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
           1. Lorem ipsum is simply dummy text of the printing
           2. and typesetting industry. 
           3. lorem ipsum has been the industry's standard dummy 
           4. text ever since
           5. the 1500s when an unknown printer took
           6. a galley of type and screambled it to make a type
           7. specimen book. it has survived not only five
    </pre>
    </td>
</tr>
</table>

取得结果(预期结果：<td>)

   1. Lorem ipsum is simply dummy text of the printing
   2. and typesetting industry. 
   3. lorem ipsum has been the industry's standard dummy 
   4. text ever since ...

但现在我的结果是

   1. Lorem ipsum is simply dummy text of the printing 2. and typesetting industry.3. lorem ipsum has been the industry's standard dummy 4. text ever since ...

为什么有关联？

在这种情况下，<td>和<pre>类是多行“省略”使用的障碍.那么我怎样才能克服这个问题呢？

环境: jquery-2.0.3。

ps。请除相关的“jqery.dotdotdot”插件外

Answer 1

问题在于white-space:nowrap;的CSS代码。这将覆盖预先格式化的文本。用这把小提琴检查一下。