.jpg)
hyphens屬性在css中用于控制單詞內(nèi)部是否自動(dòng)斷行，其manual和auto是關(guān)鍵取值。hyphens: manual僅在html中手動(dòng)插入軟連字符（-）處斷詞，適合需精確控制斷詞位置的場(chǎng)景，如專(zhuān)業(yè)術(shù)語(yǔ)；hyphens: auto則由瀏覽器根據(jù)語(yǔ)言規(guī)則自動(dòng)判斷斷詞位置，適用于普通網(wǎng)頁(yè)內(nèi)容，使排版更靈活；不同瀏覽器對(duì)auto模式下的斷詞策略可能有差異。使用時(shí)應(yīng)根據(jù)內(nèi)容類(lèi)型選擇合適模式，并配合lang屬性以確保語(yǔ)言識(shí)別準(zhǔn)確，同時(shí)注意移動(dòng)端特別是ios上支持可能受限，需額外測(cè)試以避免長(zhǎng)詞撐破布局或斷詞錯(cuò)誤的問(wèn)題。
在css中，hyphens屬性用來(lái)控制單詞內(nèi)部是否自動(dòng)斷行。常見(jiàn)的取值有none、manual和auto。這篇文章主要講的是auto和manual之間的區(qū)別，以及它們?cè)趯?shí)際使用中的效果。
什么是hyphens: manual？
當(dāng)你設(shè)置hyphens: manual時(shí)，瀏覽器只會(huì)根據(jù)你手動(dòng)插入的軟連字符（-）來(lái)決定在哪里斷詞。也就是說(shuō)，它不會(huì)自動(dòng)拆分單詞，除非你在HTML里明確告訴它“這里可以斷”。
舉個(gè)例子：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
<p>hello-world</p>
如果這段文字因?yàn)槿萜鲗挾炔粔蛐枰獡Q行，那么瀏覽器會(huì)在-的位置斷開(kāi)。如果你沒(méi)寫(xiě)這個(gè)符號(hào)，即使單詞很長(zhǎng)，也不會(huì)被拆分。
適合用在你想完全控制斷詞位置的場(chǎng)景，比如一些專(zhuān)業(yè)術(shù)語(yǔ)或者你不希望被錯(cuò)誤拆分的詞匯。
hyphens: auto是怎么工作的？
而hyphens: auto就比較聰明一點(diǎn)了。瀏覽器會(huì)根據(jù)語(yǔ)言規(guī)則自動(dòng)判斷哪些地方可以斷詞。比如英文中通常會(huì)在音節(jié)之間斷開(kāi)，中文則可能根據(jù)標(biāo)點(diǎn)或詞語(yǔ)邊界處理。
例如，一個(gè)很長(zhǎng)的單詞如antidisestablishmentarianism，在auto模式下可能會(huì)被拆成：
anti- disestablishmentarianism
當(dāng)然，具體怎么拆還取決于瀏覽器支持的語(yǔ)言規(guī)則和當(dāng)前文本的語(yǔ)言類(lèi)型（比如通過(guò)lang屬性指定語(yǔ)言）。
實(shí)際使用中的區(qū)別總結(jié)
- manual：只在你插入-的地方斷詞。
- auto：由瀏覽器根據(jù)語(yǔ)言規(guī)則自動(dòng)決定斷詞位置。
- 如果你不插-，又設(shè)為manual，那長(zhǎng)詞可能撐破布局。
- auto雖然方便，但不同瀏覽器的斷詞策略可能略有差異。
所以你可以根據(jù)內(nèi)容類(lèi)型選擇合適的模式。比如科技文檔建議用manual，避免術(shù)語(yǔ)被錯(cuò)誤拆分；普通網(wǎng)頁(yè)內(nèi)容可以用auto，更自然地適應(yīng)不同屏幕寬度。
一些容易忽略的小細(xì)節(jié)
- 不是所有語(yǔ)言都支持自動(dòng)斷詞。比如中文、日文等語(yǔ)言在某些瀏覽器中可能不主動(dòng)拆詞，除非遇到標(biāo)點(diǎn)。
- 使用hyphens時(shí)最好配合lang屬性，這樣瀏覽器能更好地識(shí)別語(yǔ)言規(guī)則。
- 某些移動(dòng)端瀏覽器對(duì)hyphens的支持還不太完善，特別是在iOS上，有時(shí)候需要額外測(cè)試。
基本上就這些。用的時(shí)候根據(jù)內(nèi)容控制斷詞方式，別讓長(zhǎng)單詞破壞你的排版就行。
.png)
