如何在 <td> 内换行没有空格的文本？答案

【问题标题】：How do I wrap text with no whitespace inside a <td>?如何在 <td> 内换行没有空格的文本？
【发布时间】：2011-03-15 21:52:14
【问题描述】：

我用过：

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

文本会在 Chrome 而不是 Firefox 中换行。

更新：我决定更改设计，使其不需要包装；事实证明，试图解决 CSS 修复/hack 太令人沮丧和耗时。

【问题讨论】：

标签： css

【解决方案1】：

试试这个，我认为这将适用于“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGG” 会产生

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>

【讨论】：

哎哟！！即使不需要，这也将强制在任意点打破任何单词。是否有解决方法仅在需要不超过容器宽度时才使用此中断词？也就是说，要让它按照“word-wrap:break-wird”的方式工作，如果它没有错误的话？
@matteo 因为这个原因，这个答案对我来说效果更好：stackoverflow.com/a/18706058/234132
强制破坏问题可以通过word-break: break-word;解决
我注册堆栈溢出就是为了喜欢这个

【解决方案2】：

这是 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;

}

我正在使用这个。

希望有人有这样的需求。

【讨论】：

【解决方案3】：

对于自动表格布局，尝试结合属性 max-width 和 word-wrap 设置相关 td 的样式。

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

在 Firefox 32、Chrome 37 和 IE11 中测试。

【讨论】：

我不明白为什么，但它仅适用于max-width，不适用于width。尽管如此，对我来说是最好的解决方案，因为它不会在任意点分解单词。

【解决方案4】：

您可以手动注入零宽度空格 () 来创建断点。

【讨论】：

还有一个非标准的HTML标签<wbr> [for "word break"]。这是对此的浏览器支持和&#8203; 解决方案：quirksmode.org/oddsandends/wbr.html

【解决方案5】：

为td 标签设置列宽。

【讨论】：

【解决方案6】：

对我有用的是：

.output {

overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;

}

【讨论】：

【解决方案7】：

我认为这是 Firefox 中长期存在的问题，这可以追溯到 Mozilla 和 Netscape。我敢打赌，您在显示长 URL 时遇到了问题。我认为这是渲染引擎的问题，而不是你可以用 CSS 解决的问题，没有一些丑陋的 hack。

改变设计是有意义的。

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

【讨论】：

【解决方案8】：

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

模板：

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

过滤器：

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

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

【讨论】：

【解决方案9】：

这样做的一种略显老套的方法是处理文本以在每个字母之间添加空格。将空格替换为&nbsp; 然后使用 letter-spacing css 属性来降低空格。

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

【讨论】：

它太老套了，所以破坏了正确的索引并且很难实现它根本不应该是一个答案:-)