hyphens换行

这篇文章发表于 阅读 0

使用 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后面开始换行并显示链接符,现在添加一个建议换行符**&shy;**

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

在这里插入图片描述 这时在字母g之前开始换行,所以存在建议符时,优先选择建议符所在位置。

PS: auto的行为取决于页面的语言,以便选择适当的链接符,所以必须设置html的lang属性,已确保用你选择的语言显示链接符。

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