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中断。我尝试了以下添加文本换行:抑制和文本换行:正常的建议，但都没用。

当前回答

获得奖励的答案是正确的，但如果表的第一行有一个合并/连接的单元格(所有单元格的宽度相同)，它就不起作用。

在这种情况下，你应该使用colgroup和col标签来正确显示它:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

2013-01-11 07:15:01

其他回答

只要增加宽度。这对我很管用。

     <td style="width:10%;"><strong>Item Name</strong></td>

2020-08-18 09:06:21

在IE 8和Chrome 13中测试。

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

这使得表格适合页面的宽度，每一列占用50%的宽度。

如果您希望第一列占据页面的更多空间，可以添加一个宽度:td的80%，如下例所示，将80%替换为您选择的百分比。

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

2011-08-15 20:23:16

如前所述，将文本放在div中几乎是可行的。你只需要指定div的宽度，这对于静态布局来说是幸运的。

这适用于FF 3.6, IE 8, Chrome。

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

2011-04-10 05:14:36

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

2011-06-01 09:44:04

问题

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

当文本中有一些空格时，它将不那么好。

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

如果没有空格的单词“然后再长”适合在一行中放入表格单元格，而没有空格的长文本“然后再长”则不行，那么长单词将被分解为两个，而不是被换行。

替代方案:插入U+200B (ZWSP)， U+00AD(软连字符) 或U+200C (ZWNJ)在每个长字后面，比如，第20个字符(然而，见下面的警告):

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

警告:插入额外的零长度字符不会影响阅读。但是，它确实会影响复制到剪贴板中的文本(这些字符当然也会被复制)。如果剪贴板文本稍后在web应用程序的某些搜索功能中使用…搜索将会被打破。尽管这种解决方案可以在一些知名的web应用程序中看到，但尽可能避免。

警告:插入额外字符时，不应该在字素中分离多个代码点。更多信息请参见https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries。

2011-02-03 09:57:28

HTML表中的换行

推荐文章

最新文章

标签