表列文本溢出省略号(宽度,以%为单位)

Rak*_*esh 2 css html5

我有这个移动标记.

<table>
<tr>
<td style="width:60%">
<div class="ellipsis">
Test bla bla
</div>
</td>
<td style="width:40%">
</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

CSS

.ellipsis { 
width : 100%;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
Run Code Online (Sandbox Code Playgroud)

截断不能按预期工作,而是根据内容扩展列.

表格布局:固定使两列相等.

有什么建议 ?谢谢.

小智 5

请使用以下css使css3截断与表一起使用

table {
   width: 200px; /*specify a width*/
   table-layout:fixed;
}
Run Code Online (Sandbox Code Playgroud)

对于表中的任何块级元素,"table-layout:fixed"属性对于处理文本截断似乎很重要.