如何在div中包含一个表 [英] How to enclose a table in a div

问题描述

我有一个 div 包含一个有两行的表。如果在单词之间有空格，一切都很好，但如果我在< td> 中插入一个长单词（例如 400个字符表将会出出 div 。如何破解并限制< div> ？

I have a div contained a table with two rows. Everything is fine if there is space between words, But If I put a long word (like 400 characters) in the <td>, the table will go out of div. How can I break the word and limit it in the <div> ?

这里是我的演示。

Here is my demo.

html： / p>

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> ，因为我不想要相同的宽度，因此< td> c $ c>

It should be noted, that I can not define width for <td>, because I don't want identical width for all <td>

这里是我想要的。

推荐答案

你可能是这样的寻找word-break CSS属性，用于指定是否在单词中折断行：

You're probably looking for the word-break CSS property, which is used to specify whether to break lines within words:

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

演示

支持 word-break 有关详细信息，请参见 MDN文章。

Support for word-break is pretty good. See the MDN article for more information.

这篇关于如何在div中包含一个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！