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


当前回答

如果适合你,你可以试试……

把一个文本区域在你的td和禁用背景颜色为白色,并定义它的行数。

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

其他回答

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

or

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

我找到了一个解决方案,似乎可以在Firefox,谷歌Chrome和Internet Explorer 7-9中工作。做一个两列表格布局,长文本在一边。我到处寻找类似的问题,在一个浏览器中工作的东西破坏了另一个浏览器,或者向表中添加更多标签似乎是糟糕的编码。

我没有使用表格。DL DT DD来拯救。至少对于修复两列布局来说,这基本上是一个术语表/字典/单词含义设置。

以及一些通用样式。

dl { margin-bottom:50px; } dl dt { background:#ccc; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; word-wrap:break-word; margin-left:120px; } <dl> <dt>test1</dt> <dd>Fusce ultricies mi nec orci tempor sit amet</dd> <dt>test2</dt> <dd>Fusce ultricies</dd> <dt>longest</dt> <dd> Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum, in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per. </dd> </dl>

使用浮动换行和左距,我得到了我所需要的。只是想把这个分享给其他人,也许它会帮助那些有两列定义风格布局的人,在文字包装方面遇到麻烦。

我尝试在表格单元格中使用换行,但它只在Internet Explorer 9中工作(当然还有Firefox和谷歌Chrome),主要是试图修复这里的Internet Explorer浏览器。

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

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

这对我来说很管用:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

表属性为:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

事实证明,这并没有什么好办法。我最接近的做法是在表格周围的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%;
}