# Text and typography

テキストのサイズ、配置、折り返し、オーバーフロー、変換などを制御します。

# Typography

Typographyヘルパークラスを使用してテキストのサイズとスタイルを制御します。 これらの値は、 Material Design type specification に基づいています。

これらのクラスは、 xs から xl までのすべてのブレークポイントに適用できます。 ベースクラスを使用している場合、 .text-{value}は .text-xs-${value} であると推定されます。

  • .text-{value} for xs
  • .text-{breakpoint}-{value} for sm, md, lg and xl

value プロパティは次のいずれかです:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle-1
  • subtitle-2
  • body-1
  • body-2
  • button
  • caption
  • overline

以下の例では、さまざまなサイズが異なるブレークポイントでどのように表示されるかを示します:

# Font emphasis

マテリアルデザインは、デフォルトで 100、300、400、500、700、900 フォントウェイトと斜体をサポートしています。

# Text

# 配置

配置ヘルパー クラスを使用すると、テキストを簡単に再配置できます。

レスポンシブ・ディスプレイをサポートする配置クラスもあります。

# Decoration

.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 ユーティリティクラスでは、長いコンテンツのテキストを省略できます。

# RTLでのテキスト配置

RTL を使用するとき、rtl の指定に関係なく、配置(alignment)を維持したい場合があります。 これは、次の形式のテキストアライメント・ヘルパークラスを使用することで実現できます：text-<breakpoint>-<direction> （breakpointはsm, md, lg, xl、directionはleftまたはrightです）。 また、directionのstartとendを使用して、rtlに応答するように配置することもできます。

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM