css连字符,如何控制连字符位置?如何理解软硬连字符?
发布于 作者:苏南大叔 来源:程序如此灵动~

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

苏南大叔的“程序如此灵动”博客,记录苏南大叔的编程经验文章。本文测试环境:win10
,chrome@123.0.6312.105
。
连字符
连字符日常表现是一条短横线,在代码里面属于不可见字符,当然也属于特殊字符。为了更好的感知这个不可见字符,可以有特殊的代码表达方式。
- 软连字符:
­
,编码:U+00AD
。 - 硬连字符:
‐
,编码:U+2010
。
hyphens:none
css
设置:hyphens:none
,但是硬连字符是恒定显示的,软连字符恒定不显示。

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

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

表格总结
范例代码,依然建议测试方式是:不断拖动浏览器,改变容器宽度,查看最终的连字符显示效果。测试结果总结如下:
区别 | 网页编码 | unicode编码 | hyphens:none | hyphens:manual | hyphens:auto |
---|---|---|---|---|---|
软连字符 | ­ | U+00AD | 不显示 | 可能显示 | 可能显示 |
硬连字符 | ‐ | U+2010 | 必须显示 | 必须显示 | 必须显示 |
特殊情况
软连字符和硬连字符,都属于不可见字符。那么,­
和U+00AD
,都属于一种人类可感知字符的方式。所以,存在着第三种表现形式:不可见的字符方式。所以,这种情况下,需要在代码编辑器里面查看,比如vscode
,会把这种不可见字符特殊标注出来。如下图所示:

这里额外的结论是:
- 一个单词多个软连字符的话,选一个显示。
- 一个单词多个硬连字符的话,全部都显示。
参考文章
结语
这篇文章就属于“奇怪的知识又增加了”系列,正常情况下,谁会去在于连字符的显示位置呢?更多css
相关经验文章,请点击:


