css - 表の列のテキスト オーバーフロー省略記号 (幅 % )

Question

モバイル用のこのマークアップがあります。

<table>
<tr>
<td style="width:60%">
<div class="ellipsis">
Test bla bla
</div>
</td>
<td style="width:40%">
</td>
</tr>

CSS

.ellipsis { 
width : 100%;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}

切り捨ては期待どおりに機能せず、代わりにコンテンツに応じて列が拡張されます。

Table-Layout : fixed は両方の列を等しくします。

助言がありますか ？ありがとう。

Answer 1

次の css を使用して、テーブルで css3 の切り捨てを機能させてください。

table {
   width: 200px; /*specify a width*/
   table-layout:fixed;
}

プロパティ "table-layout:fixed" は、テーブル内のブロック レベル要素のテキストの切り捨てを機能させるために重要なようです。