CSS 单词间距 word-spacing属性

word-spacing属性用来增加或减少单词之间的距离，默认值为0。该属性接受一个正的长度值或负的长度值；设置一个正的长度值时，单词之间的间隔会增加；设置一个负的长度值时，单词之间的间隔会减少，让单词挤得更紧，甚至出现重叠。

因为该属性把由空白符包围的一个字符串看作一个单词，而汉字之间没有空格，所以该属性对中文无效。但是，如果在汉字中人为添加空格，则会把空格前后的汉字按单词处理，该属性会生效。

在上一节字符间距的例子中，整个古诗被设置为在容器中居中显示。细心的读者可能已经发现，h1 标题和 h2 标题的中线，并没有完全对齐。

没有对齐的原因，跟我们的实现方式有关，因为使用 letter-spacing 属性让标题稀疏明朗，而 letter-spacing 属性则是通过在每个字符的后面插入指定的空间，来调整字符间距的。所以，h1 标题的最后一个字符‘思’的后面被插入了一个 10px 的空间，而 h2 标题并未插入任何内容，其结果就导致 h1 标题和 h2 标题的中线不能完全对齐。

要解决这个问题，可以人为在 h1 标题的汉字之间插入一个空格，再通过 word-spacing 属性来调整单词间距，让 h1 标题完美居中。如：

<h1>静夜思</h1>

在 h1 标题的汉字之间插入空格后，运行结果如图 3‑19 所示：

图3-19 word-spacing属性效果

从上图可以看出，经过调整后，h1 标题和 h2 标题的中线已经完全对齐。这个问题，本身是一个细小的问题，常常被设计师所忽视。

然而，在一个严谨的设计师眼里，往往没有小问题，所有问题都是大问题。并且，对于任何问题，都会刨根问底，找到问题背后的根源。因为只有这样，才能彻底解决问题。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 单词间距 word-spacing属性相关推荐

CSS 单词折行 word-wrap属性
word-wrap属性用来设置是否允许长单词或 URL 地址在容器的边界处自动换行,取值为 normal | break-word,默认值为 normal. normal 表示只允许在半角空格或连字符 ...
015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
一.css控制单词换行的属性 1.word-break自己决定自动换行的处理方法 ①word-break:normal:使用浏览器默认的换行规则.(英文) ②word-break:keep-all:不 ...
CSS单词换行and断词
背景某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 1 2 word – break : keep – all ...
c语言如何字符间距,css 字间距、CSS字体间距、css 字符间距设置
「CSS」文本编排相关的CSS属性设置 1.font-family:设置字体族. 格式为font-family:字体1,字体2,--,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3 ...
php 字体间距,深入理解CSS文字间距word-spacing与字符间距letter-spacing的不同（附代码）...
CSS 把"字(word)"定义为任何非空白符字符组成的串,并由某种空白字符包围.letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白. ...
html遇到英文单词整体换行,CSS单词换行and断词，你真的完全了解吗_html/css_WEB-ITnose...
背景某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 开心的提交代码,刷新页面.我擦,怎么还是没有断词?不可能啊! ...
CSS基础(part8)--文本外观属性
学习笔记,仅供参考,有错必纠文章目录 CSS 文本外观属性 color:文本颜色 letter-spacing word-spacing line-height test-decoration te ...
css中字体之间的距离是什么意思,css字符间距(css文字间距怎么设置)
怎么样控制字和字之间的间距,而不是行间距. 在需要设置的CSS标签下加入一下代码即可.word-spacing:8px;letter-spacing: 1px; line-height:25px是绝对 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

CSS 单词间距 word-spacing属性

CSS 单词间距 word-spacing属性相关推荐

最新文章

热门文章