我需要在某个地方修复一些CSS,因为我的文字没有环绕,而是如果它是一个非常长的单词而无限期地继续下去.
就像在大多数情况下一样,我尝试了自动换行:break-word;在我的CSS文件中,它不起作用.
然后,令我惊讶的是,根据谷歌Chrome开发者工具的建议,我尝试了破解词:破解词;它解决了我的问题.我对此感到震惊,所以我一直在谷歌上搜索这两者之间的区别,但我没有看到这个问题.
此外,我不认为断言:断言;是记录在案的行为,看看W3没有提到它.我在Safari和Chrome上进行了测试,它在两者上都很完美,但是我对使用断言有点犹豫:破解词;因为我在任何地方都没有提到它.
解决方法
更新
如果您打算打破单词并想要连字符,请尝试以下操作:
.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
从CaniUse开始:
Chrome,Safari and other WebKit/Blink browsers also support the unofficial
break-word
value which is treated likeword-wrap: break-word
.