我正在break-word
创建一个容器,这样极长的单词就不会溢出。虽然 Chrome 和 Safari 处理得非常好,但 Firefox 和 IE 似乎喜欢随机断词——甚至是短词,在最荒谬的地方。请参阅下面的屏幕截图:
这是我用来防止破坏单词的代码:
.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
这是我用于容器和文本的 CSS:
.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}
HTML
<div class="wrap break-word">
<div class="row-fluid quotation-marks">“”</div>
<span class="quote-text">
Having a partner definitely allows you to take more risks.
</span>
<span class="author">Arianna Huffington</span>
</div>
为什么会这样?关于如何让单词在所有浏览器中正常中断的任何线索?Firefox 绝对是一个优先事项。
提前致谢!