2015-11-05 82 views
2

我很困擾瀏覽器處理對齊文本的連字符的不同方式。我有以下CSS設置爲我的文字:如何優化連字符

text-align: justify; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
hyphens: auto; 

我的語言設置爲en。正在被不一致處理一個字「表達」:

Chrome: no hyphenation 
Firefox: express-ing [correct!] 
IE11: express-ing [correct!] 
Safari: express-ing [correct!] 

令人困惑,Safari瀏覽器能夠連字符的德語單詞「總體藝術作品」:

Chrome: no hyphenation 
Firefox: no hyphenation 
IE11: no hyphenation 
Safari: Gesamtkunst-werk [correct!] 

我不知道Safari瀏覽器是如何感應到單詞是德語,是連字符。有任何想法嗎?

CSS3規範指示hyphenate-resource選項,但我沒有找到包含和/或編輯的示例文件。理想情況下,如果主要瀏覽器支持該選項,我會將其包含在內,並希望將其編輯爲非英文單詞以及編輯其默認值。

什麼是最好的方法?

回答

0

我很努力地使用瀏覽器處理連字符的不同方式 從行到行的對齊文本。

方法1. CSS
的CSS唯一的解決辦法見this link

article p{ 
    text-align: justify; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto; 
} 

你已經嘗試過這一點,並發現有絕對爲Chrome不支持無​​論瀏覽器的版本,並已經看到了缺乏跨瀏覽器的結果的一致性。並且可能想知道是否有更加一致的方式來連接在所有主流瀏覽器上都能正常工作的單詞?

方法2.使用Javascript
this link的存在對所有主要的瀏覽器上運行的解決方案。而且......目前大多數瀏覽器都支持更多的語言支持。首先選擇一種(或多種)語言,您需要在您的站點中加強支持,然後按照步驟操作並自定義您自己的腳本,最後點擊「創建!」。這將爲您創建縮小的JavaScript。將其複製到hyphenate.js文件中,最後不要忘記在要連字符的段落上定義類。

<head> 
    <script src="hyphenate.js" type="text/javascript"></script> 
</head> 

<body> 
    <article lang="nl" class="hyphen"> // in this case Dutch >> NL 
    <p>.......</P? 
    </article> 
</body> 

注:請注意我定製類和縮短至連字符,而不是默認斷字