文本的换行与包裹之真的很少使用的 hyphens?

灰太狼 2024-05-24 03:07 66阅读 0赞

### hyphens ###

> 告诉浏览器在换行时如何使用连字符.

可以完全不使用连字符, 可以让浏览器决定什么时候连字符, 可以也可以手动控制什么时候使用.

首先, 连字符的 `Unicode` 为 `U+2010`, 并不是键盘上半角标点符号的减号, 也不是全角标点符号的破折号![在这里插入图片描述][1dac9fe9afe945c083498dc63a3ac259.png_pic_center]

再者, 连字符仅仅是一种渲染结果, 其不会影响文档真实的内容, 不会影响文本选择也不会影响搜索  
![在这里插入图片描述][aa1ce70dbf1a45e5a11e8742cb8531e6.png_pic_center]

![在这里插入图片描述][60351d8f0f9d4ca98c4f136ae1705833.png_pic_center]

其次, 连字规则具有语言特性, 浏览器只会在当前属性存在且有合适的连字字典时使用连字进行连接. 语言特性就要由 `HTML` 的全局属性 `lang` 决定.

最后, 关于 `CSS` 规范中并没有定义如何使用连字符, 因此具体的连字可能浏览器与浏览器不同

有以下关键词属性

*  `none`: 换行时单词不会被打断, 即便单词内的字符建议换行. 行只会在空白符处换行.
 *  `auto`: 浏览器自己决定如何使用连字符. 但是`建议断行机会`将会覆盖浏览器自动决定的断开位置.
 *  `manual`: 只有在单词内有`建议断行机会`时单词才可能断行.

#### 建议换行机会 ####

有两个 `Unicode` 字符用来指明文本中潜在的断行点.

*  `U+2010(HYPHEN)`: 「硬」连字符, 表示一个可见的断行机会. 即便这一行不在 `U+2010` 处断开, 这个地方依然会渲染连字符. 在 `HTML` 中硬连字符用 `&hyphen;` 表示.
 *  `U+00AD(SHY)`: 「软」连字符, 这个 `Unicode` 并不会被渲染为可见的字符, 而是表示如果浏览器要断行, 那么可以在 `U+00AD` 处断开并使用连字符. 在 `HTML` 中软连字符用 `` 表示.

<div class="box box1">
      <code><strong>none:</strong></code>
      Hello, World, unconditionalunconditional, where are you from LOL? 222222222222222222222222 <a
        href="">https://flatuicolors.com/palette/se</a> unconditionalunconditional
    </div>
    <div class="box box2">
      <code><strong>auto:</strong></code>
      Hello, World, unconditionalunconditional, where are you from LOL? 222222222222222222222222 <a
        href="">https://flatuicolors.com/palette/se</a> unconditionalunconditional
    </div>
    <div class="box box3">
      <code><strong>manual:</strong></code>
      Hello, World, unconditionalunconditional, whe&hyphen;re are you from LOL? 222222222222222222222222 <a
        href="">https://flatuicolors.com/palette/se</a> unconditionalunconditional
    </div>

.box {
        
      width: 150px;
      border: 3px solid salmon;
    }
    
    .box1 {
         hyphens: none; }
    .box2 {
         hyphens: auto; }
    .box3 {
         hyphens: manual; }

首先三者共同的表现, 那就是对于大数, `hyphens` 这个 `CSS` 属性没有效果, 因为三幅图中对于 `222222...222` 这个大数都没有换行.

其次, 第一个长单词中 `unconditionalunconditional` 可以看出 `none` 完全不会断开, `auto` 选择了在 `n` 后面断开, 但是 `manual` 是在我们指定插入的 `` 处断开.

接着, 对于 `manual` 的表现: 在硬断行处一定插入连字符, 即便这里压根不可能换行(`1`处). 如果是软换行, 如果软换行处不会换行, 也不会插入连字符(`2`处), 但是如果软换行处所在的单词会换行, 那么就会在软换行处换行并插入换行连字符(`3`处)  
![在这里插入图片描述][6e82c711654c4532aa51ca9f9a7cb5cb.png_pic_center]

最后值得注意的是, 当 `HTML` 的 `<wbr>` 元素导致换行时, 不会添加连字符的. 从截图中可以看出, 如果是 `Edge` 或者 `Chrome` 浏览器, `hyphens` 值为 `auto` 时甚至会破坏原有的 `<wbr>` 效果, 但是在 `Safari` 浏览器中就不会这样.

<div class="box box1">
      <code><strong>none:</strong></code>
      Hello, World, uncondi<wbr>tionalunconditional
    </div>
    <div class="box box2">
      <code><strong>auto:</strong></code>
      Hello, World, uncondi<wbr>tionalunconditional
    </div>
    <div class="box box3">
      <code><strong>manual:</strong></code>
      Hello, World, uncondi<wbr>tionalunconditional
    </div>

![在这里插入图片描述][a1e071a6cff04e2fb9ebb2ea0a1e0824.png_pic_center]

#### 兼容性 ####

最后多一点关于浏览器兼容性的问题

*  在 `Safari` 浏览器中需要使用 `-webkit-` 私有前缀
 *  在 `Chrome` 和 `Edge` 浏览器中, `auto` 值仅仅在 `macOS` 设备和 `Android` 设备上支持, 并且只支持操作系统提供连字符的语言.

谢谢你看到这里?

[1dac9fe9afe945c083498dc63a3ac259.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a212418b2404448f894ae59c20b6031d.png
[aa1ce70dbf1a45e5a11e8742cb8531e6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/4c88c44bda1344afb8bedb6b73ab0079.png
[60351d8f0f9d4ca98c4f136ae1705833.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0d34b0dc5ade48e797eb76c3746789eb.png
[6e82c711654c4532aa51ca9f9a7cb5cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/7b03cf3be9044c8ebe1f07da2e61ab6d.png
[a1e071a6cff04e2fb9ebb2ea0a1e0824.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/20994b206e0b441eb2b9fca5ba6a788d.png