CSS属性参考 | word-spacing

CSS word-spacing 属性用于指定单词之间的距离。

word-spacing属性用于增加或减少某段文字中,单词于单词之间的距离。通过该属性增加的值会以默认的单词距离为基础进行增加。

word-spacing不仅可以应用在文字上,实际上它可以应用在任何内联元素上。word-spacing中的word实际上代表内联或内联块级元素。因此,我们可以使用word-spacing属性来增加或减少某个元素中内联元素的距离,例如图片等。

word-spacing是一个可以动画的CSS属性。关于有哪些CSS 属性是可以动画的,你可以参考W3C Properties from CSS

word-spacing的算法会根据浏览器的不同而有所不同。另外,word-spacing还会受到text-align:justify的影响。

在实际应用中,推荐使用相对单位来设置该属性的值。最佳实践是使用em作为长度单位。因为单词的间距是相对于单词本身,而不是相对于文档的根元素。

官方语法
word-spacing: normal | <length> | <percentage> | inherit

参数:

  • normal:使用正常的单词间距,由当前字体或浏览器定义。
  • <length>:通过<length>值来指定具体的额外间距来增加字体的单词间距。
  • <percentage>:通过指定受影响字符的宽度的百分比的方式来增加单词间距。
  • inherit:继承父元素的word-spacing值。

word-spacing属性的初始值为normal

应用范围

word-spacing属性可以应用所有元素上。

示例代码
word-spacing: normal;    /* 关键字 */
word-spacing: 3px;       /* <length>值 */
word-spacing: 0.3em;
在线演示

下面的文字间距为2em。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.(中文无效!)

下面是一组内联元素,鼠标滑过它们时,它们的间距变为2em。

浏览器支持

所有的现代浏览器都支持CSS3 word-spacing属性,包括:Chrome, Firefox, Safari, Opera, Internet Explorer, 以及 Android 和 iOS。

相关阅读
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!

易微帮 » CSS属性参考 | word-spacing

提供最优质的资源集合

立即查看 了解详情