【CSS Modules】text-box-trimプロパティの使い方
text-box-trimプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
text-box-trimプロパティは、CSSにおいてテキストボックスの余分なスペースを調整する役割を保持するプロパティです。このプロパティは、テキストが行の先頭や末尾に通常含んでいる、文字の形（グリフ）そのものではない空白部分を視覚的にトリミング（切り詰める）ために使用されます。これにより、テキストがその所属する行ボックスの視覚的な境界に正確に揃うようになり、デザイン上の厳密な整列を実現することが可能になります。
具体的には、文字の基準線（ベースライン）や、大文字の高さ（cap-height）、小文字の高さ（x-height）といった特定の文字の寸法に基づいて、テキストの上下の余白を調整します。たとえば、noneという値を指定すればトリミングは行わず、bothを指定すれば行の先頭と末尾の両方で余白がトリミングされます。また、trim-startやtrim-endといった値と組み合わせて、トリミングの基準としてcap-heightやx-heightなどを明示的に指定することもできます。
このプロパティは、特に多言語環境や、ピクセル単位での厳密なレイアウトが求められるデザインにおいて、テキストの視覚的な一貫性を高めることを目的としています。テキストコンテンツの配置をより精密に制御し、グリッドシステムに沿ったきれいな表示を実現するために開発が進められています。現時点では主要なブラウザでのサポートは限定的ですが、将来的にウェブコンテンツのレイアウトを細かく調整するための重要なツールとなることが期待されています。
公式リファレンス: text-box-trim
構文(syntax)
1text-box-trim: none;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません