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


当前回答

看起来你需要设置word-wrap:break-word;在块元素(div)上,具有指定的(非相对的)宽度。例:

<表格样式=“宽度:100%;”><tr> <td><div style=“display:block; word-wrap: break-word; width:40em;”>looooo</div></td> <td><span style=“display:inline;”>Foo</span></td> </tr></table>

或者根据Abhishek Simon的建议使用word-break:break-all。

其他回答

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

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

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

虽然可能性不大,但请使用Firebug(或类似工具)仔细检查,确保您没有意外继承以下规则:

white-space:nowrap;

这可能会覆盖您指定的换行行为。

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

如果你只关心文本,你可以这样做没有表格布局:固定

<table>
<tr>
  <td>
    Title
  </td>
  <td>
    Length
  </td>
  <td>
    Action
  </td>
  </tr>

  <tr>
  <td>
    Long song name
  </td>
  <td>
    3:11
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>

<tr>
  <td  colspan=3>
    <div style='width:200px;background-color:lime;margin-left:20px'>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>quick </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>foxed </div>
      <div style='float:left;white-space:pre'>jumped </div>
      <div style='float:left;white-space:pre'>over </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>lazy </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>cat </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
    
    </div>
    
  </td>
</tr>


  <tr>
  <td>
    Long song name1
  </td>
  <td>
    2:20
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>


</table>

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

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