html - 使用表格单元格内的 div 内的跨度管理文本溢出

Question

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

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

这里是 HTML 代码片段:

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

Answer 1

测试这个例子我的 friend 们!

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

这里是更新后的 JSFiddle 片段: http://jsfiddle.net/Fedy2/wG3CF/3/