Question

我需要在某个地方修复一些CSS，因为我的文字没有包裹，而是如果它是一个非常长的单词而无限期地继续下去。

在大多数情况下，我在我的CSS文件中尝试了word-wrap: break-word;，但它无效。

然后，令我惊讶的是，根据Google Chrome开发者工具的建议，我尝试了word-break: break-word;并解决了我的问题。我对此感到震惊，所以我一直在谷歌上搜索这两者之间的区别，但我没有看到这个问题。

此外，我不认为word-break: break-word;是记录在案的行为，因为W3没有提及它。我在Safari和Chrome上测试了它，它在两者上都很完美，但是我对使用word-break: break-word;犹豫不决，因为我在任何地方都没有提到它。

Answer 1

<强>更新

如果您打算打破单词并想要连字符，请尝试以下操作：

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

这甚至在Chrome中也有用......有点......没有连字符。无论如何，详细解释都在article中。

<小时/> word-break:break-word没有记录，只有主开发人员知道这种超级秘密技术，如 Quivering Palm of Death 。

实际上它是一个模糊的-webkit-属性，其作用类似于word-wrap: break-word，但它也用于动态长度。

<强> Kenneth.io - Word Wrapping Hypernation Using CSS

<强> CSS-Tricks - word-break

来自CaniUse：

Chrome，Safari和其他WebKit / Blink浏览器也支持非官方break-word值，该值被视为word-wrap: break-word。

自动换行：break-word和word-break：break-word之间的区别

1 个答案: