Question

我的div包含两行table。如果单词之间有空格，一切都很好，但如果我在<td>中放了一个长单词（比如 400个字符），那么该表将会离开div。如何在<div>？

中破解并限制它

Here是我的演示。

HTML：

<div id="container">
    <table>
        <td>
            <tr>
                title
            <tr>
            <tr>
                contenttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
            </tr>
        </td>
    </table>
</div>

的CSS：

#container{
    border: 2px solid;
    width: 50%;
    margin: 0 auto;
}

table{
   table-layout: fixed;
}

td{
   word-wrap:break-word;
}

应该注意的是，我无法为width定义<td>，因为我不希望所有<td>

的宽度相同

Here就是我想要的。 （假设没有空间），我该怎么做？

Answer 1

使用table-layout: fixed，您还需要设置表格宽度：

#container {
    width: 70%;
    border: 1px solid;
    margin: 0 auto;
}
table {
    width: 100%;
    table-layout: fixed;
}
td {
    word-wrap: break-word
}

<div id="container">
    <table>
        <tr>
            <td>title</td>
            <td class="cc">contentttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
        </tr>
    </table>
</div>

Answer 2

您可能正在寻找word-break CSS属性，该属性用于指定是否在单词中断行：

td {
   word-wrap: break-word;
   word-break: break-all;
}

Demo

对word-break的支持非常好。有关详细信息，请参阅MDN article。

如何在div中包含表

2 个答案: