語法
/* 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 文字模組