CSS中更聪明的单词突破？

Question

如果我只穿上word-break: break-all一个元素,我经常会这样做:

大家好,我正在输入一个
太长而不适合的消息!

显然这会更好:

大家好,我正在输入一条
太长而不合适的消息!

但同时如果有人写道:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!

然后我希望它是:

BLAAAAAAAAARRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!

我似乎无法找到实际做到这一点的方法.

请注意,元素的宽度不固定,可能会更改.

Answer 1

尝试word-break: break-word;它应该按照您的预期行事.

Answer 2

对于我们的许多项目，我们通常在必要时添加以下内容：

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

它使用不同的浏览器来处理大多数奇怪的情况。

Answer 3

更新后的答案应该是：

overflow-wrap:break-word;

它会破坏一个单词，该单词本身无法容纳在自己的行中，但保留所有其他单词原样（请参阅此处的溢出换行）。

您还可以使用：

overflow-wrap:anywhere;但这将允许在任何单词之后换行，以减少元素的宽度。请参阅 MDN 中描述的以下差异：

[break-word is] 与 Anywhere 值相同，如果行中没有其他可接受的断点，则通常允许在任意点处中断不可中断的单词，但在计算时不考虑由单词中断引入的软换行机会最小含量内在尺寸。

此外，anywhereInternet Explore、Safari 和某些移动浏览器不支持，但break-word所有主要浏览器都支持（请参阅[此处][2]）。

word-break: break-word;不应再使用，因为它已被弃用，取而代之的是overflow-wrap:break-word;. 现在，word-break当您想要中断单词时，无论它们是否适合自己的行（即OP的第一个示例），都可以使用该属性word-break: break-all。

与 word-break 相比，overflow-wrap 仅在整个单词无法在不溢出的情况下放置在自己的行上时才会创建中断。

（来自上面也链接的溢出包装）