CSS punctuation-trim 属性：テキストの句読点を制御する

CSS プロパティ punctuation-trim

punctuation-trim 属性は、テキスト内の句読点の処理方法を定義します。テキストの折り返しや圧縮時に、句読点をどのように表示するかを制御することができます。

適用要素

すべての要素

値	説明
`none`	デフォルト値。句読点のトリミングは行われません。
`start`	行頭に句読点がある場合、省略することができます。
`end`	行末に句読点がある場合、省略することができます。
`allow-end`	通常は省略される場合でも、行末に句読点を保持することができます。
`all`	`start` と `end` の両方の効果を組み合わせたもので、行頭と行末の両方で句読点を省略することができます。

以下は、punctuation-trim 属性を使用した例です。


<p class="trim-start">これは、カンマ、ピリオド、疑問符などの句読点を含むサンプルテキストです。</p>


.trim-start {
  punctuation-trim: start;
}


<p class="trim-end">これは、カンマ、ピリオド、疑問符などの句読点を含むサンプルテキストです。</p>


.trim-end {
  punctuation-trim: end;
}


<p class="trim-all">これは、カンマ、ピリオド、疑問符などの句読点を含むサンプルテキストです。</p>


.trim-all {
  punctuation-trim: all;
}

punctuation-trim プロパティは、現時点ではブラウザのサポートが限られており、主に日本語、中国語、韓国語などの東アジア言語で使用されています。
最適な互換性を確保するために、text-justify や text-align などの他のタイポグラフィープロパティと一緒に使用することをお勧めします。

A1: いいえ、現時点ではすべてのブラウザでサポートされているわけではありません。主に東アジア言語で使用されるブラウザでサポートされています。

A2: テキストの折り返しや圧縮時に、句読点の表示を制御することで、より美しいタイポグラフィを実現することができます。

A3: punctuation-trim は句読点の表示を制御するのに対し、text-justify はテキスト全体の均等割付を制御します。