我有一个html表的问题,它溢出了它的父容器。
.page {
width: 280px;
border:solid 1px blue;
}
.my-table {
word-wrap: break-word;
}
.my-table td {
border:solid 1px #333;
}
<div class="page">
<table class="my-table">
<tr>
<th>Header Text</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Header Text</th>
</tr>
<tr>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
</tr>
</table>
</div>
如何强制标题文本和表单元格文本都换行,使其适合其容器?我更喜欢CSS唯一的方法,但也开放使用Javascript (或jQuery),如果绝对必要。
发布于 2013-10-10 04:34:54
尝试添加
word-break: break-all
添加到table元素上的CSS。
这将使表格单元格中的单词断开,这样表格不会比它包含的div更宽,但表格列的大小仍然是动态调整的。jsfiddle demo。
发布于 2011-07-07 02:28:47
将display: block;
和overflow: auto;
添加到.my-table
。这将简单地切断超过您强制执行的280px
限制的任何内容。由于像pélagosthrough
这样的词比280px
更宽泛,所以没有办法让它看起来“漂亮”。
发布于 2017-12-21 14:29:11
尝试添加到td
display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify
溢出的tds将与新行对齐。
https://stackoverflow.com/questions/6601148
复制相似问题