在我的例子中，我必须同时使用换行和空白预换行来达到最佳效果。希望它能帮助到更多人。

<td class="wrap-longtext">
   long,longlonglonglonglonglonglong..................
</td>

<style>    
  .wrap-longtext
  {
    word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
    white-space: pre-wrap;
  }
</style>

这可能会有帮助，

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>

风格= "表布局:固定;宽度:98%;自动换行:break-word”

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

演示- http://jsfiddle.net/Ne4BR/749/

这对我来说很有效。我有很长的链接，会导致在web浏览器上的表超过100%。 在IE, Chrome, Android和Safari上测试。

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

在这种情况下，你应该使用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>

这里常见的令人困惑的问题是我们有2个不同的css属性:换行和换行。 最重要的是，换行有一个叫做break-word的选项。容易混淆:-)

通常这对我来说很管用，即使是在桌子里: 单词分割:break-word;

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

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