2013-01-07 25 views
9

我是break-word ing一個容器,以便極長的單詞不會溢出。儘管Chrome和Safari瀏覽器處理得很好,但Firefox和IE似乎都是隨機打破單詞 - 即使是簡短的文字,也是最荒謬的一點。看下面的截圖:Firefox word break在隨機點打破短字

enter image description here

這裏是我使用,以防止折斷的話代碼:

.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">&ldquo;&rdquo;</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; 
} 

的話不再破古怪:

回答

18

你在加倍CSS參數。試試這個..

.break-word { 
-ms-word-break: break-all; 
-ms-word-wrap: break-all; 
-webkit-word-break: break-word; 
-webkit-word-wrap: break-word; 
word-break: break-word; 
word-wrap: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto; 
} 
+2

這似乎並不爲我工作在IE11 – Dave

+0

'連字符:auto;'就夠了(對於我的用例) – vsync

+0

這個答案需要更新。不適用於除Chrome以外的當前瀏覽器版本。瀏覽器不工作:火狐58.0.2和邊緣41.16299.15.0(無斷詞的話)和IE 11.192.16299.0(打破的話本身包裹時適用)。 – Akerus

4

我改變我的破字的代碼做了一個臨時的解決辦法。我只是不確定在跨瀏覽器支持方面有多安全(因爲我只使用最新版本的Chrome,Firefox和Safari進行了測試)

明確聲明連接僅支持en-US顯式聲明。如果有人有更有效的答案/解釋,我會很樂意接受你的答案。

3

刪除word-break: break-all。它的含義是它會創建你描述的確切問題:指導瀏覽器隨意將單詞分成幾部分。

使用word-wrap: break-all更合理(或者說不那麼荒謬),因爲它告訴瀏覽器只有在沒有其他方法將線條放入可用寬度時纔會打破單詞。但它也違反了英語和其他大多數語言的規則:在任意點打破一個詞是不正確的。所以也要把它拿走。

連寫更有道理,但它限制瀏覽器的支持,併爲明顯的原因,它需要文本的語言來聲明(因爲斷字的規則是強烈依賴於語言)。您可以使用基於JavaScript的斷字如Hyphenator.js對付那些不支持CSS斷字

0
word-break:keep-all; 

瀏覽器解決了這個問題對我來說