😗

【Angular】変数に含まれる改行コードで改行する

2022/07/27に公開

困ったこと

Angularで文字列をレンダリングするときに文字列に含まれる改行コード(\n)で改行させる方法が分からなかった

たとえば以下のような文字列があったとする。

サンプル文字列
text = "Hello, World!\nI want to break line!";

\nで改行したい。

ただこれをhtmlに渡しただけでは改行されない。

html
<div>{{text}}</div>
出力
Hello, World!\nI want to break line!

解決策

以下のようにCSS(style="white-space: pre-wrap")を追加するだけで改行してくれるようになる。

html
<div style="white-space: pre-wrap">{{text}}</div>
出力
Hello, World!
I want to break line!

すごい簡単。

white-spaceにpre-wrapを設定するとHTMLのタグ内に記述したホワイトスペースがそのまま描画され、改行文字や<br>要素があるときには改行してくれる。(white-spaceの詳しい説明はこちら

注意点

HTMLタグに含まれるホワイトスペースがそのまま描画されるので以下のようにホワイトスペースを含めてhtmlを記述すると1行目にインデントが入ったような出力になる。

html
<div style="white-space: pre-wrap">
  {{text}}
</div>
出力
  Hello, World!
I want to break line!

インデントをいれたくない場合は1行で書く。
<div style="white-space: pre-wrap">{{text}}</div>

参考

https://stackoverflow.com/questions/47678148/how-to-get-line-break-within-string-interpolation-in-angularjs

https://github.com/angular/angular/issues/7781#issuecomment-408117841

Discussion

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