HTML表中的换行

我一直在使用word-wrap: break-word在div和span中对文本进行换行。然而，它似乎在表格单元格中不起作用。我有一个设置为width:100%的表，有一行和两列。列中的文本虽然使用了上面的换行样式，但不能自动换行。它会导致文本超出单元格的边界。这发生在Firefox，谷歌Chrome和Internet Explorer上。

下面是源代码的样子:

td { 边框:1px实体; L} <table style="width: 100%;"> < tr > < td > < span style=" font - family:宋体;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong词 < / div > 道明> < / <span style=" font - family:宋体;">短字< / span > < / td > < / tr > 表> < /

上面的长单词比我的页面的边界大，但它没有与上面的HTML中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

一个解决方案，工作与谷歌Chrome和Firefox(未测试与Internet Explorer)是设置display: table-cell作为块元素。

2011-10-10 12:53:26

其他回答

我有同样的问题，这个工作对我来说很好

 <style> 
      td{
            word-break: break-word;
      }
    </style>
    <table style="width: 100%;">
      <tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>

2020-07-31 14:01:46

这可能会有帮助，

css

.wrap-me{ word-break: break-all !important; } <table> <thead> <tr> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> <td>Col 4</td> <td>Col 5</td> <td>Col 6</td> <td>Col 7</td> </tr> </thead> <tbody> <tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td> <td class="wrap-me">test only</td> <td class="wrap-me">test with space long text</td> <td class="wrap-me">Col 4</td> <td class="wrap-me">Col 5</td> <td class="wrap-me">Col 6</td> <td class="wrap-me">Col 7</td> </tr> <tr> <td class="wrap-me">test only</td> <td class="wrap-me">test only</td> <td class="wrap-me">test with space long text</td> <td class="wrap-me">testwithoutspacetestonlylongtext</td> <td class="wrap-me">Col 5</td> <td class="wrap-me">Col 6</td> <td class="wrap-me">Col 7</td> </tr> </tbody> </table>

2021-06-29 13:42:51

唯一需要做的是根据你想要实现的布局，为<td>或<td>内的<div>添加宽度。

eg:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

2011-08-16 08:24:59

我已经尽力了，但对我来说就是这样

white-space: pre-wrap;
word-wrap: break-word;

2020-09-06 10:34:18

<td style="word-break:break-all;">longtextwithoutspace</td>

<span style="word-break:break-all;">longtextwithoutspace</span>

2009-10-08 17:01:45

HTML表中的换行

推荐文章

最新文章

标签