我是break-word
ing一个容器,以便极长的单词不会溢出。尽管Chrome和Safari浏览器处理得很好,但Firefox和IE似乎都是随机打破单词 - 即使是简短的文字,也是最荒谬的一点。看下面的截图:Firefox word break在随机点打破短字
这里是我使用,以防止折断的话代码:
.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绝对是一个优先事项。
在此先感谢!
.break-word {
word-break: break-word;
word-wrap: break-word;
}
的话不再破古怪:
这似乎并不为我工作在IE11 – Dave
'连字符:auto;'就够了(对于我的用例) – vsync
这个答案需要更新。不适用于除Chrome以外的当前浏览器版本。浏览器不工作:火狐58.0.2和边缘41.16299.15.0(无断词的话)和IE 11.192.16299.0(打破的话本身包裹时适用)。 – Akerus