😽

MUI Typographyで複数行テキストを表示する方法

に公開
CSS
React
frontend
mui
tech

こんにちは！
React開発で便利なUIライブラリのMUIのTypographyコンポーネント(https://mui.com/material-ui/react-typography/) を使うと、文字表現の幅が広がってとても便利です。
使用する中で、「複数行に対応したいときはどう実装するのか？」という疑問があり調べたので、今回はTypographyで複数行テキストを表示する方法を忘備録としてまとめます。

実装方法

CSSのwhite-space プロパティを利用する

Typographyで複数行のテキストを表示するためには、CSSのwhite-spaceプロパティを設定します。

例

<Typography
  sx={{ whiteSpace: 'pre-line' }}
>
  {`1行目のテキスト
2行目のテキスト
3行目のテキスト`}
</Typography>

上記のようにwhiteSpace: 'pre-line'を設定することで、\nによる改行がそのまま表示されます。

pre-lineとpre-wrapの違い

「あれ、pre-wrapだとだめなんだっけ」と思ったのですが、改めて調べてみたところ挙動に違いがあったのでこちらもついでにまとめます。

  • pre-line:

    • 連続する空白文字(スペースやタブ)は1つにまとめられる
    • 改行文字は保持される
    • 必要に応じて行が折り返される

  • pre-wrap:

    • 空白文字や改行文字はそのまま保持される
    • 必要に応じて行が折り返される

あまり使わないので意識していませんでしたが、こう比べてみると結構違いがありますね。
詳細な情報はMDN Web Docsを参考にしてください！

まとめ

MUIのTypographyコンポーネントで複数行のテキストを表示するためには、CSSのwhite-spaceプロパティを設定することが大切です。pre-lineやpre-wrapを駆使することで、空白文字や改行文字の挙動をうまくコントロールできます。
自分の要件に合ったCSSを用いて、理想通りの実装を目指しましょう！それでは。

Discussion