使用表格单元格内的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

测试这个例子我的朋友!

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

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