word-wrap 属性就是其中很有代表性的例子。它决定了文本行超过容器的边界时是否断开转行。目前这一属性已经得到了绝大多数主流浏览器的支持。
回到前面的原理分析,其实我们会发现一个矛盾,{white-space: pre;} 很倔犟地不愿换行,而 {word-wrap: break-word;} 则要求内部文本自动换行。面对这样的冲突,浏览器如何决断?
在 CSS 中,控制文本换行方式的属性有很多,当发生冲突的时候,某些属性在文本排版中的优先级更高,因而会在冲突中胜出,决定最终的文本样式。很显然,在上面的这起冲突中,{word-wrap: break-word;} 更加强势,倔犟的文本行最终还是乖乖地换行了。
结语
感谢你看到了这里,希望这篇文章对你有所帮助!










