CSS Reference
text-spacing-trim
約物文字のカーニングを指定する
text-spacing-trim
プロパティは、中国語/日本語/韓国語(CJK)の約物文字(句読点や括弧類など)に設定される、隣接する文字間(カーニング)やテキスト行の先頭または末尾に設定される内部スペーシングを制御します。
指定できる値は下記の通りです。
space-all |
すべての約物文字は、全角グリフで設定されます。 |
---|---|
normal |
各行の先頭に全角グリフで約物文字を設定します。各行の末尾については、両端揃えを行う上で調整する必要があれば半角グリフで、そうでなければ全角グリフで設定されます。(既定値) |
trim-both |
各行の先頭と文末の約物文字について半角グリフで設定されます。 |
space-first |
ブロックコンテナの先頭行と、強制改行後の各行に、全角グリフで約物文字を設定します。それ以外は normal と同様です。 |
trim-start |
各行の先頭にある約物文字について半角グリフで設定されます。それ以外は normal と同様です。 |
trim-all |
すべての約物文字について半角グリフで設定されます。 |
auto |
ユーザーエージェントが、タイポグラフィ的に最も高品質なスペーシングを自動選択します。 |
各プロパティ値と間隔(アキ)調整の可否をまとめると下記のようになります。
値 | 行頭の約物文字に対する間隔の調整 | 文末の約物文字に対する間隔の調整 | 連続する約物文字に対する間隔の調整 | すべての約物文字に対する間隔の調整 |
---|---|---|---|---|
space-all |
しない | |||
normal |
しない | 行に収まらない場合のみ | する | しない |
space-first |
1行目を除いてする | |||
trim-start |
する | |||
trim-both |
する | |||
trim-all |
する | |||
auto |
ユーザーエージェントに依存 |
text-spacing-trimのサンプルソース
p { text-indent: 1em; text-spacing-trim: trim-both; }
主要ブラウザの対応
IE11 | × |
---|---|
Edge(EdgeHTML) | × |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | × |
Safari | × |
iOS Safari | × |
Android Chrome | ○ |
用途から CSS プロパティやセレクタを探す
用途から CSS プロパティやセレクタを逆引きできます。
- 疑似クラス
-
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- :where()
対応ブラウザから CSS プロパティやセレクタを探す
対応ブラウザから CSS プロパティやセレクタを逆引きできます。
- IE11
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :placeholder-shown
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- ID セレクタ
- attr()
- background
- background-color
- calc()
- hyphens
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(EdgeHTML)
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @supports
- ID セレクタ
- attr()
- background
- background-color
- calc()
- hyphens
- minmax()
- prefers-color-scheme
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(Chromium)
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scope
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- clamp()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- field-sizing
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-align
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-wrap
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Firefox
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- :where()
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scroll-timeline
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- clamp()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-align
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-wrap
- text-wrap-mode
- text-wrap-style
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scope
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- clamp()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- field-sizing
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-align
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-wrap
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Safari
-
- ::after
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scope
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-wrap
- text-wrap-mode
- text-wrap-style
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- iOS Safari
-
- ::after
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scope
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-wrap
- text-wrap-mode
- text-wrap-style
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Android Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @property
- @scope
- @start-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- atan()
- atan2()
- attr()
- background
- background-color
- calc()
- circle()
- clamp()
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- cos()
- ellipse()
- exp()
- field-sizing
- font-palette
- hyphenate-character
- hyphens
- hypot()
- inset()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- prefers-color-scheme
- rem()
- round()
- ruby-align
- ruby-position
- scroll-behavior
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-wrap
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ