🛒

React(CSS) \nで改行する方法

2022/05/03に公開約1,500字

はじめに

Reactで改行を含む文字列を表示する際に、改行されずに表示されていました.そこで、毎回\n<br/>に書き換えるのは面倒だなと思い、この記事を書くに至りました.

状況

文字列に含まれる\nで改行されない.


\nで改行されない

画像のテキストは"test\nnew line!!\ntest"となっています.

解決方法

white-spaceを指定することで、\nで改行することができます.

white-spaceとは

CSSのプロパティで、要素内のホワイトスペースをどのように扱うかを設定するものです.ホワイトスペースとは、空白、改行、タブなどのような区切り文字を指します.
white-spaceの指定可能なキーワード値は以下になります.

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

なお、デフォルトはnormalです.

この中で、\nで改行できるのは、prepre-wrappre-linebreak-spaceです.それぞれの挙動は画像のようになります.

white-space: pre; white-space: pre-wrap;
white-space: pre-line; white-space: break-spaces;

それぞれのキーワードでの簡単な挙動の違いはテキストの折り返し、末尾の空白、末尾の空白以外の区切り文字の扱いについてです.それぞれの目的のスタイルに合わせて選択すると良いと思います.

まとめ

今回はCSSのプロパティを指定することで文字列に含まれる\nで改行する方法についてご紹介しました.若干の挙動の違いはありますが、以下のいずれかの指定方法で改行することができます.

white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

最後までご覧いただきありがとうございました!

参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

Discussion

ログインするとコメントできます