我是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