Angularでtextareaの改行\nを超簡単に`<br>`にして表示する

3636 ワード
Angular HTML 改行 textarea CSS HTML テキストリンク

Angularでtextareaの改行\nを超簡単に<br>にして表示する

検索すると変換処理コードを書いてそれをHTML側でng-bindするとかなんとか…

そーんな面倒なことしなくても良いはずとわたしの勘が叫ぶ。


やはり簡単でした。の備忘録

リプロ

textareaに入力した文章を表示するHTML側で、

<div class="showbox">{{ message }}</div>

.show-box {
    border: 1px solid red;
    width: 500px;
    min-height: 100px;
    margin: 5px 0 20px;
    word-break: break-all;
  }

だと、こうなる。


解決方法

CSSにpre-wrapをつけるだけ。

<div class="show-box pre-wrap">{{ message }}</div>

.show-box {
    border: 1px solid red;
    width: 500px;
    min-height: 100px;
    margin: 5px 0 20px;
    word-break: break-all;
  }

.pre-wrap {
    white-space: pre-wrap;
}

以上



参考：AngularJSで改行を含むテキストを超簡単にng-bindする