Question

我用过：

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

并且文字包含在Chrome中但不包含在Firefox中。

更新：我决定更改设计，因此不需要换行;试图理清CSS修复/黑客证明太令人沮丧和耗时。

Answer 1

试试这个，我认为这适用于类似“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGGG 会产生

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我从谷歌的几个不同网站上采取了我的例子。我已经在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;       /* css-3 */
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>

Answer 2

使用CSS3 word-wrap: break-word;。适用于基于WebKit的浏览器（Safari，Chrome）。

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

Answer 3

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

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

在Firefox 32，Chrome 37和IE11中测试过。

Answer 4

以下是OP询问的高级版本。

有时，会发生什么事情，我们的客户希望我们在断字后给出' - '到行尾。

喜欢

05:00

打破

因此，如果支持，则会有新的CSS属性，通常在最新的浏览器中支持。

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

我正在使用这个。

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

Answer 5

为td标记设置列宽。

Answer 6

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

Answer 7

这样做的一种稍微晦涩的方法是处理文本以在每个字母之间添加空格。用 替换空格然后使用letter-spacing css属性将空格缩小。

我知道，这是一个黑客...但如果没有其他工作，它应该没有问题包装。

Answer 8

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

改变设计是有道理的。

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

Answer 9

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

<强>模板：

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

过滤

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

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

Answer 10

对我有用的是：

.output {

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

}

CSS：如何在没有空格的情况下包装文本？

10 个答案: