React(CSS) \nで改行する方法
はじめに
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で改行できるのは、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;
最後までご覧いただきありがとうございました！
参考文献
Author And Source
この問題について(React(CSS) \nで改行する方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/shake_sanma/articles/9244b03d42cd09著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol