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

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

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

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

问题

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

这可能会有帮助，

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>

事实证明，这并没有什么好办法。我最接近的做法是在表格周围的div中添加“overflow:hidden;”，从而丢失文本。 真正的解决办法似乎是抛弃餐桌。使用divs和相对定位，我能够实现相同的效果，减去<table>的遗留

2015更新:这是为那些像我一样想要这个答案的人准备的。经过6年的努力，感谢所有贡献者。

* { /* this works for all but td */
  word-wrap:break-word;
}

table { /* this somehow makes it work for td */
  table-layout:fixed;
  width:100%;
}

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