如何将表格放在div中

Question

我是一名有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我有一个包含了一个表格的

。如果单元格里面有空格，一切都很好。但是，如果我在中放入一个长单词（例如400个字符），那么表格就会超出

的范围。我该如何在

中断开单词并限制其长度？

这里是我的演示。

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;
}

需要注意的是，我不能为<td>定义width，因为我不想让所有<td>的宽度相同。

这里是我想要的。 (假设没有空格)，我该怎么做？

- Shafizadeh

---

你正在寻找 word-break: break-all; 吗？请参考MDN - Wander Nauta

word-break 应该足够了，但使用两者也没有坏处。 - Wander Nauta

@WanderNauta 行，谢谢。我已经这样做了，并且它可以正确地工作。但是我担心旧浏览器，因为word-break是一个CSS3属性。对于较旧的浏览器来说，这个属性还可用吗？ - Shafizadeh

@WanderNauta非常好，请在我的问题下添加一个答案，我会将其接受为我的答案。 - Shafizadeh

让我们在聊天中继续这个讨论。 - Shafizadeh

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>

- dfsq

---

我知道了（设置width），但是有一个问题，标题和内容之间有很大的空隙！就像我说的，我不想让所有列都具有相同的width。 - Shafizadeh

Answer 2

你可能正在寻找 word-break CSS 属性，它用于指定是否在单词内部断行：

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

示例

word-break的支持相当完善。有关更多信息，请参见MDN文章。

- Wander Nauta