Question

我正在尝试设置表的最大宽度，但它似乎不起作用。如果表格中的单词太长，它会自动扩展表格的宽度。我该如何阻止这种情况发生，而是说太长的话会转到下一行呢？

<style>
table {
max-width: 300px;
}
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>

<table>

<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>

</table>

Answer 1

如果你想让你的最大宽度工作，你需要在表格上设置CSS属性table-layout: fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Answer 2

在css部分添加以下规则。

div{
    overflow-wrap: break-word;
    max-width: 300px;

Answer 3

在div中放入max-wdith可以解决问题=）

＆＃13;

<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>

＆＃13;

<table>

<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>

</table>

＆＃13;

Answer 4

如果您为容器指定了宽度，则

word-wrap: break-word;将起作用，您正在应用此属性。因此，您必须将width:100px;或所需宽度分配给div标记。

<style type="text/css">
    div {
         width: 100px; /* this will limit the length of the word to 100px */
         border: 1px solid blue;
         word-wrap: break-word;
        }
</style>

设置表格的最大宽度

4 个答案: