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