文本的换行与包裹之自定义连字符 hyphenate-character

庇耳拉海莱

于 2022-10-12 08:58:47 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： safari chrome css

本文链接：https://blog.youkuaiyun.com/broken_promise/article/details/127275540

css 专栏收录该内容

51 篇文章

订阅专栏

hyphenate-character

这个属性设置在一行结尾断行处的连字字符

所有自动添加连字符和软换行机会可以添加的连字符的地方都会根据 hyphenate-character 的设置添加连字符

首先就要说兼容性的问题, 目前(2022年10月) Chrome 和 Edge 浏览器作为实验性特性支持这个 CSS 属性, Safari 浏览器支持, 但是都需要添加
-webkit- 前缀

这个属性有两个值

<string>: 自己指定的连字符, 如果自己指定的连字符很长, 那么浏览器可能会截断.
auto: 默认值. 浏览器自己决定如何使用合适的连字符. 因为 hyphenate-character 是可继承的, 所以仅在覆盖继承属性时需要显示设置 auto.

<div class="box box1">
  hello, world, whereAreYouFromIWantToKnow
</div>
<div class="box box2">
  hel&hyphen;lo, world, whereAreYouFr&shy;omIWantToKnow
</div>
<div class="box box3">
  hello, world, whereAreYouFr&shy;omIWantToKnow
</div>

.box {
  border: 3px solid salmon;
  width: 150px;
  -webkit-hyphenate-character: '❤️';
  hyphenate-character: '❤️';
}
.box1 {
  hyphens: auto;
  -webkit-hyphens: auto;
}
.box2 {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.box3 {
  hyphens: none;
  -webkit-hyphens: none;
}