# Text and typography
テキストのサイズ、配置、折り返し、オーバーフロー、変換などを制御します。
# Typography
Typographyヘルパークラスを使用してテキストのサイズとスタイルを制御します。 これらの値は、 Material Design type specification に基づいています。
これらのクラスは、 xs から xl までのすべてのブレークポイントに適用できます。 ベースクラスを使用している場合、 .text-{value}は .text-xs-${value} であると推定されます。
.text-{value}forxs.text-{breakpoint}-{value}forsm,md,lgandxl
value プロパティは次のいずれかです:
h1h2h3h4h5h6subtitle-1subtitle-2body-1body-2buttoncaptionoverline
TIP
v2.3.0以前のすべてのバージョンでは、これらのクラスは以下のいずれかでした:
.display-4.display-3.display-2.display-1.headline.title.subtitle-1.subtitle-2.body-1.body-2.caption.overline
以下の例では、さまざまなサイズが異なるブレークポイントでどのように表示されるかを示します:
# Font emphasis
マテリアルデザインは、デフォルトで 100、300、400、500、700、900 フォントウェイトと斜体をサポートしています。
# Text
# 配置
配置ヘルパー クラスを使用すると、テキストを簡単に再配置できます。
レスポンシブ・ディスプレイをサポートする配置クラスもあります。
# Decoration
v2.3.0+の新機能
.text-decoration-noneクラスを使ってテキストの装飾を削除したり、.text-decoration-overline、.text-decoration-underline、.text-decoration-line-throughを使ってオーバーライン、アンダーライン、ラインスルーを追加したりすることができます。
# Opacity
Opacityヘルパークラスを使用すると、テキストの強調を簡単に調整できます。 text--primary の不透明度はデフォルトのテキストと同じです。 text--secondary はヒントやヘルパーテキストに使用されます。 text---disabled でテキストを強調表示を解除します。
# Transform
テキストは、capitalizationクラスで大文字や小文字などに変換できます。
テキストの分割や text-transform の削除も可能です。 最初の例では、 text-transform: uppercase カスタムクラスが上書きされ、テキストの大文字小文字をそのままにすることができます。 2番目の例では、使用可能なスペースに合わせて長い単語を分割します。
# ラップとオーバーフロー
.text-no-wrap ユーティリティクラスでテキストの折り返しを防ぐことができます。
.text-truncate ユーティリティクラスでは、長いコンテンツのテキストを省略できます。
必須 display: inline-block または display: block 。
# RTLでのテキスト配置
RTL を使用するとき、rtl の指定に関係なく、配置(alignment)を維持したい場合があります。 これは、次の形式のテキストアライメント・ヘルパークラスを使用することで実現できます：text-<breakpoint>-<direction> （breakpointはsm, md, lg, xl、directionはleftまたはrightです）。 また、directionのstartとendを使用して、rtlに応答するように配置することもできます。