css连字符，如何控制连字符位置？如何理解软硬连字符？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

如果对于浏览器控制的连字符位置不满意，那么可以使用软连字符或者硬连字符来控制横线出现的位置，这就很小众的知识点了。连字符都很少有人会注意到，何况连字符的位置呢？

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。本文测试环境：win10，chrome@123.0.6312.105。

连字符

连字符日常表现是一条短横线，在代码里面属于不可见字符，当然也属于特殊字符。为了更好的感知这个不可见字符，可以有特殊的代码表达方式。

• 软连字符：­，编码：U+00AD。
• 硬连字符：‐，编码：U+2010。

hyphens:none

css设置：hyphens:none，但是硬连字符是恒定显示的，软连字符恒定不显示。

<style>
  div {
    width: 95%;
    border: 1px solid black;
    margin-bottom: 3px;
  }
  div.p0 {
    hyphens: none;
    border: 1px solid red;
  }
</style>
<div class="p0" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&shy;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p0" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&hyphen;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p0" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>

hyphens:manual

css设置：hyphens:manual。软连字符，看情况显示。硬连字符，恒定显示。并没有显示其它位置的连字符。

<style>
  div {
    width: 95%;
    border: 1px solid black;
    margin-bottom: 3px;
  }
  div.p1 {
    hyphens: manual;
    border: 1px solid blue;
  }
</style>
<div class="p1" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&shy;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p1" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&hyphen;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p1" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>

hyphens:auto

css设置：hyphens:auto，和上一条情况一样。

<style>
  div {
    width: 95%;
    border: 1px solid black;
    margin-bottom: 3px;
  }
  div.p2 {
    hyphens:auto;
    border: 1px solid green;
  }
</style>
<div class="p2" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&shy;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p2" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanma&hyphen;n. see more:
  https://www.newsn.net/about.html
</div>
<div class="p2" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>

表格总结

范例代码，依然建议测试方式是：不断拖动浏览器，改变容器宽度，查看最终的连字符显示效果。测试结果总结如下：

特殊情况

软连字符和硬连字符，都属于不可见字符。那么，­和U+00AD，都属于一种人类可感知字符的方式。所以，存在着第三种表现形式：不可见的字符方式。所以，这种情况下，需要在代码编辑器里面查看，比如vscode，会把这种不可见字符特殊标注出来。如下图所示：

这里额外的结论是：

• 一个单词多个软连字符的话，选一个显示。
• 一个单词多个硬连字符的话，全部都显示。

参考文章

• https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

结语

这篇文章就属于“奇怪的知识又增加了”系列，正常情况下，谁会去在于连字符的显示位置呢？更多css相关经验文章，请点击：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。