语法
/* Keyword values */
text-spacing-trim: normal;
text-spacing-trim: space-all;
text-spacing-trim: space-first;
text-spacing-trim: trim-start;
/* Global values */
text-spacing-trim: inherit;
text-spacing-trim: initial;
text-spacing-trim: revert;
text-spacing-trim: revert-layer;
text-spacing-trim: unset;
值
<spacing-trim>-
定义不同的间距修剪选项。可用值如下：
normal-
将 CJK 全角开标点字符设置为在每行开头处为全角。将 CJK 全角闭标点字符设置为在每行结尾处为全角，如果它们在对齐之前不适合该行，则设置为半角。折叠标点字符之间的间距。
space-all-
所有 CJK 全角标点字符均设置为全角。
space-first-
行为与
normal相同，但 CJK 全角开标点字符在文本块容器的第一行开头以及换行符等显式换行后的每行开头处设置为全角。 trim-start-
行为与
normal相同，但 CJK 全角开标点字符在每行开头处设置为半角。
注意： CSS Text 模块还定义了
trim-both、trim-all和auto值。然而，这些目前尚未在任何浏览器中实现。
描述
text-spacing-trim 属性对 CJK 标点字符应用间距/字偶间距，以产生由 日语文本布局要求 (JLREQ) 和 中文文本布局要求 (CLREQ) 定义的视觉上令人愉悦的排版。
许多 CJK 标点字符包含字形内部间距。例如，CJK 句号和 CJK 闭括号通常在其右侧具有字形内部间距，以使其具有与其他表意字符一致的恒定前进度量。然而，当它们连续出现时，字形内部间距可能会变得过大。
text-spacing-trim 可用于调整相邻字符之间（字偶间距）以及文本行开头或结尾处这种过大的间距。一般来说：
- 如果全角标点字符设置为全角，则它在两侧都有内部间距，并且与表意字符的宽度相同。
- 如果全角标点字符设置为半角，则它仅在一侧设置内部间距，而另一侧与开头（开标点字符）或结尾（闭标点字符）齐平。半角字符通常是表意字符宽度的一半。
注意： 为避免过度字偶间距的风险，字体必须具有 OpenType 交替半宽 (halt) 功能、上下文半宽间距 (chws) 功能，或两者兼有。如果字体不具备任一功能，text-spacing-trim 将被禁用。
全角标点符号折叠
当成对的标点符号彼此相邻时，它们之间的空格将根据以下规则折叠：
- 如果前一个字符是全角开标点字符、全角中点、表意空格 (U+3000)、等效或更大字号的全角闭标点字符，或属于 Unicode 通用类别“开标点”(Ps) 的字符，则将全角开标点字符设置为半角。否则，将其设置为全角。
- 如果下一个字符是全角闭标点字符、全角中点、表意空格 (U+3000)、字号更大的全角开标点字符，或属于 Unicode 通用类别“闭标点”(Pe) 的字符，则将全角闭标点字符设置为半角。否则，将其设置为全角。
正式定义
正式语法
text-spacing-trim =
<spacing-trim> |
auto
<spacing-trim> =
space-all |
normal |
space-first |
trim-start |
trim-both |
trim-all
示例
text-spacing-trim 值比较
此示例比较了四种不同 text-spacing-trim 属性的效果，将它们应用于四个相同的段落，以便您可以看到每个段落之间的视觉差异。
HTML
<main>
<div id="normal">
<h2>normal</h2>
<p>
（東）、【「（東）」】。<br />
「東」「東」「東」東東東「東」。
</p>
</div>
<div id="space-all">
<h2>space-all</h2>
<p>
（東）、【「（東）」】。<br />
「東」「東」「東」東東東「東」。
</p>
</div>
<div id="space-first">
<h2>space-first</h2>
<p>
（東）、【「（東）」】。<br />
「東」「東」「東」東東東「東」。
</p>
</div>
<div id="trim-start">
<h2>trim-start</h2>
<p>
（東）、【「（東）」】。<br />
「東」「東」「東」東東東「東」。
</p>
</div>
</main>
CSS
main {
font-family:
"Yu Gothic", "YuGothic", "Noto Sans JP", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", sans-serif;
display: grid;
gap: 0.5em;
grid-template-columns: 1fr 1fr;
width: 70%;
margin: 0 auto;
}
h2 {
font-size: 80%;
margin: 0;
}
p {
font-size: 20px;
border: 1px solid blue;
margin: 0;
}
#normal {
text-spacing-trim: normal;
grid-column: 1;
grid-row: 1;
}
#space-all {
text-spacing-trim: space-all;
grid-column: 2;
grid-row: 1;
}
#space-first {
text-spacing-trim: space-first;
grid-column: 1;
grid-row: 2;
}
#trim-start {
text-spacing-trim: trim-start;
grid-column: 2;
grid-row: 2;
}
结果
规范
| 规范 |
|---|
| CSS 文本模块第 4 级 # text-spacing-trim-property |
浏览器兼容性
加载中…
另见
text-autospaceic和ric单位- CSS 文本模块