🛒

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

2022/05/03に公開

はじめに

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

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

\nで改行されない

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

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

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で改行できるのは、pre、pre-wrap、pre-line、break-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;

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