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属性，已确保用你选择的语言显示链接符。

本篇文章是无事可做，整理笔记所写，一个人的世界就是这么无聊啊