在表格单元格内的 div 内使用 span 管理文本溢出答案

【问题标题】：Manage text overflow with a span inside a div inside a table cell在表格单元格内的 div 内使用 span 管理文本溢出
【发布时间】：2014-06-13 18:59:53
【问题描述】：

我在 span 元素中有一个长文本，我想使用省略号截断它。 span 元素位于表格单元格内的 div 元素内。

如何截断单元格大小的长文本。

这里是 HTML 代码 sn-p:

<table>
 <tr>
   <td>
     <div> 
       <span>
         this is a long sentence to test the text overflow
       </span>
     </div>
   </td>
 </tr>

还有 CSS 代码：

table {
 width: 50px;
 table-layout: fixed;
}

td {
 border: 1px solid red;
}

span {
 white-space: nowrap;
 text-overflow: ellipsis;
}

这是我在 JSFiddle 中的案例： http://jsfiddle.net/Fedy2/wG3CF/

【问题讨论】：

【解决方案1】：

朋友们测试一下这个例子！

 span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    width:100%;
    display:block;
}

【讨论】：

【解决方案2】：

一定要用<span>吗？

它在<p> 标签中工作。

【讨论】：