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


当前回答

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

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

其他回答

问题

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

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

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

我找到了一个解决方案,似乎可以在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浏览器。

我也遇到过类似的问题。我在一个AngularJS应用程序的Bootstrap模式中有一个表。当我更改表上的过滤器,并且在相关单元格中出现长值时,文本将溢出到单元格之外和模态之外。这个CSS最终解决了这个问题,应用到TD上:

style="white-space:pre-wrap; word-break:break-word"

这使得值即使在更改表内容时也能正确地换行。

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

把一个文本区域在你的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>