word-spacing
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSS 属性 word-spacing 用于设置单词之间以及标签之间的空格长度。
尝试一下
word-spacing: normal;
word-spacing: 1rem;
word-spacing: 4px;
word-spacing: -0.4ch;
<section id="default-example">
<p id="example-element">
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: Amstelvar;
font-style: normal;
}
section {
font-size: 1.2em;
font-family: Amstelvar, serif;
}
语法
css
/* 关键字值 */
word-spacing: normal;
/* <length> 值 */
word-spacing: 3px;
word-spacing: 0.3em;
/* 全局值 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;
值
无障碍
较大的正值或负值的 word-spacing 会使应用该样式的句子变得不可读。如果文本使用了非常大的正值，单词之间的间距会被拉得过远，以至于看起来不像是一句话。如果文本使用了很大的负值，则单词之间会相互重叠，以至于无法辨别各单词的开头和结尾。
易读的 word-spacing 必须根据具体情况逐一确定，因为不同的字体族具有不同的字符宽度。没有一个通用的数值能够保证所有字体族都能自动保持良好的可读性。
示例
HTML
html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
CSS
css
#mozdiv1 {
word-spacing: 15px;
}
#mozdiv2 {
word-spacing: 5em;
}
形式定义
| 初始值 | normal |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 是 |
| Percentages | refer to the width of the affected glyph |
| 计算值 | 绝对 <length> |
| 动画类型 | a length |
形式语法
word-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
规范
| Specification |
|---|
| CSS Text Module Level 3 # word-spacing-property |
| Scalable Vector Graphics (SVG) 2 # WordSpacingProperty |
浏览器兼容性
Loading…
参见
letter-spacing- SVG
word-spacing属性