furoblog’s blog

妻と一緒にはじめました。1日1更新が目標です。

【Angular】改行対応を入れた時の空白問題

APIから改行コードで値が返ってきた時、そのままだと改行が空白になってしまいます。

これの解決方法としては、CSS

 

white-space: pre-warp;

 

を入れればOKです。

ただこのCSSを例えばtrなどに入れると、空白の部分が表示されてしまうと思います。

 

<tr class="pre-warp">

空白aaaa

</tr>

 

Angularだとprettierなどの保存する時に自動補完を入れてることがあるので地味に厄介なんですよね。

そんな時はspanタグを使えばOKです。

 

<tr>

空白<span class="pre-warp">aaaa</span>

</tr>

 

こうすれば空白は無視されてきれいに表示されます。