DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!
word-spacing
属性类似于 letter-spacing
,但自然地,它的用途控制文本中单词之间的空格量,而不是单个字符。
.element {
word-spacing: .75em;
}
word-spacing
可以接收三个不同的值
- “normal” 关键字,它重置默认间距
- 使用任何 CSS 单位的长度值(最常见的是 px、em、rem)
- “inherit” 关键字,它应用父元素的
word-spacing
目前最佳实践是使用 em
。 可以调整字体大小,因此使用像素可能会导致单词之间的间距无法随着大小缩放的问题。 rem
通常很棒,但浏览器支持较低,在这种用例中,最好让间距直接与应用它的单词相关,而不是根元素。

需要注意的是,在此上下文中,“word” 实际上指的是一个内联内容片段——这意味着 word-spacing
也会影响 inline-block
元素以及 inline
元素。 在此示例中,通过设置其父容器的 word-spacing
来对几个此类元素进行间距
值得注意的是……
word-spacing
属性可以使用 CSS 过渡 进行动画处理。- 虽然根据规范允许使用“百分比”值来确定间距,但它可能会产生不可预测的结果——通常根本没有任何效果。
- 将 white-space 设置为零是 解决内联块元素之间空格问题 的方法之一。
我注意到在尝试使用单词间距居中标题时出现了一个问题。
在 Firefox 中,它的行为符合预期:文字真正居中,单词之间有很大的间隙。在 Chrome 中,它似乎将间距应用到第一个单词的前面,导致文本向框的右侧推。在 Safari 中,它似乎完全忽略了
text-align: center
。所有屏幕截图均来自 OS X (10.8.4) 上当前版本的浏览器。是否有解决此不一致性的方法,或者我是否必须使用手动间距来修复它?
屏幕截图窗口
看起来图片没有嵌入……屏幕截图在此处。
将单词间距设置为零以去除内联块元素之间的空格对我没有任何影响。零以外的任何值都有效。所以我尝试找出需要使用哪个负 em 值。
看起来 -0.25em 去除了块之间的标准空白。
酷,谢谢,但是有没有办法增加字母之间的间距,而不是单词?
他们有一整页关于这个的内容。
https://css-tricks.org.cn/almanac/properties/l/letter-spacing/
https://w3schools.org.cn/cssref/pr_text_letter-spacing.asp 不客气。
“此值表示除了单词之间的默认空格之外的单词间空格。值可以为负数,但可能存在特定于实现的限制。”
http://www.w3.org/wiki/CSS/Properties/word-spacing
同意。实际上,默认(或正常)的单词间距是 0.25em (http://webtypography.net/2.1.1)。我用主要浏览器(Chrome/Firefox/Safari/IE)测试过,它们都具有 0.25em 的默认值。如果您将单词间距设置为 -0.25em,则结果是单词之间没有空格(所有单词都连接在一起)。如果您将其设置为小于此值,例如 -1em,大多数浏览器会重叠单词,除了 IE(我在 11 上测试过),它会保持没有间距而不是重叠。
function dsd(){
jdflksdlf.slkfjsdi = ” nothing “;
}
在我的 Firefox 上,似乎过度的负单词间距不会导致内联块重叠(它仍然会使单词重叠)。如果这在大多数浏览器中都能工作,那将是最好的。
您好。我有一个导航菜单。如果我设置了 word-spacing: 2em,我该如何去除“About us”之间的空格?我想在“contact”和“about”之间有 2em 的距离,而不是“About”和“us”之间。谢谢。
我正在尝试在一个电子书中的句子中两个单词之间添加额外的空格。
例如(AGE NONE)我不想在句子中的任何其他单词之间添加额外的空格。我目前正在通过插入 en 空格代码 三次来实现这一点。我只是想知道是否有更好的方法来做到这一点?
我发现这在选择下拉列表中不起作用。选择选项不受单词间距的影响。