hyphens換行

使用 hyphens 進行單詞換行

一般換行使用 word-break

• break-all：單詞會被強行斷開，不方便閱讀
• break-word： 當空間不夠時，單詞會自動換行到下一行

通常的英文排版都會合理應用所有空間，可以給沒寫完的那個單詞使用“-”連接起來，hyphens可以實現這種效果。hyphens可選值:

• none: 單詞不會換行，即使字符串中建議換行，只會在空白符處換行

• manual: 單詞會在建議換行的地方換行

• auto: 瀏覽器自動的在適當的位置換行，並使連字符鏈接單詞；如果存在建議換行符則在建議的地方換行(這裏後面會描述)。

建議換行符

• hyphen: 即使不存在換行也會顯示鏈接符
• shy: 只有換行的時候纔會顯示鏈接符

示例代碼：

p {
    width: 50px;
    border: 1px solid;
}
.none {
    hyphens: none;
}
.manual {
    hyphens: manual;
}
.auto {
    hyphens: auto;
}

none:

<p lang="en" class="none">An extreme&shy;ly long English word</p>

manual:

<p lang="en" class="manual">An extreme&shy;ly long English word</p>

auto:

<p lang="en" class="auto">An extreme&shy;ly long English word</p>

設置爲auto時單詞English在字母g後面開始換行並顯示鏈接符，現在添加一個建議換行符**­**

<p lang="en" class="auto">An extreme&shy;ly long En&shy;glish word</p>

這時在字母g之前開始換行，所以存在建議符時，優先選擇建議符所在位置。

PS: auto的行爲取決於頁面的語言，以便選擇適當的鏈接符，所以必須設置html的lang屬性，已確保用你選擇的語言顯示鏈接符。

本篇文章是無事可做，整理筆記所寫，一個人的世界就是這麼無聊啊