如何在<td>内包装没有空格的文本？

我用过：

word-break:break-all;
table-layout:fixed;

文字会在Chrome中自动换行，但不会在Firefox中自动换行。

更新：我决定更改设计，因此不需要包装。试图解决CSS修复/黑客问题令人沮丧且耗时。

试试这个，我认为这将适用于将产生“ AAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGG”的东西

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我从Google的几个不同网站上借鉴了我的榜样。我已经在ff 5.0，IE 8.0和Chrome 10上对此进行了测试。

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

使用CSS3 word-wrap: break-word;。也可以在基于WebKit的浏览器（Safari，Chrome）中使用。

更新：我忘记了，但是所讨论的元素必须隐式或显式地定位为固定元素或显示为块元素。对于表格单元格（td），请使用display: inline-block;。

这是OP要求的高级版本。

有时候，发生的事情是，我们的客户希望我们在断行到行尾后给“-”。

喜欢

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

打破

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

因此，有一个新的CSS属性（如果支持），通常在最新的浏览器中受支持。

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

我正在用这个。

我希望有人会有这样的需求。

对于自动表格布局，请尝试结合最大宽度和自动换行属性来设置相关td的样式。

例如： <td style="max-width:175px; word-wrap:break-word;"> ... </td>

经过Firefox 32，Chrome 37和IE11的测试。

您可以手动注入零宽度空格（＆＃8203;）来创建断点。

设置td标签的列宽。

我认为这在Firefox中是一个长期存在的问题，可追溯到Mozilla和Netscape。我敢打赌，您在显示长网址时遇到了问题。我认为这是渲染引擎的问题，而不是您可以使用CSS修复的问题，而没有一些难看的hacks。

更改设计很有意义。

不过，这看起来很有希望：http : //hacks.mozilla.org/2009/06/word-wrap/

我将Angular用于我的项目，并设法通过一个简单的过滤器解决了这个问题：

模板：

<td>{{string | wordBreak}}</td>

过滤：

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

您看不到它，但是在$1有一个不可见的空间（感谢@kingjeffrey提示）之后，该空间为表单元格启用了分词。

一种稍微有点怪异的方法是通过处理文本以在每个字母之间添加空格。用替换空格， 然后使用letter-spacing css属性降低空格。

我知道，这是骇客...但是，如果没有其他方法，它应该可以毫无问题地包装。