読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

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

AngularJS CSS

AngularJSのデータバインディング便利ですが、ng-bindで複数行のテキストを表示しようとすると途端に面倒になるんですよね。。
そのままじゃHTML上では改行されないので<br>に変換する必要があって、それはfilterとかで簡単にできるのですが、それをタグとして認識させるには$sce.trustAsHtmlしないといけなくて。。
でもユーザー入力の文字列をHTMLとして画面に表示することを許可してしまうのは危険すぎる。。
br以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。

とまあそんな感じだったんですが、この間すごいことに気付いてしまいました。

 

アッ・・・
CSSだけでできた・・・・・

 

ちなみに、white-space: pre; でも改行は反映されますが、右端に達したときの自動の折り返しはないので行が長い場合にテキストがはみ出てしまいます。
あとwhite-space: pre-wrap; というのもあり、こちらでもテキスト中の改行の反映と自動折り返しをしてくれます。
pre-lineとの違いは、連続したホワイトスペースがそのまま表示されるという点です。
(無指定の場合やpre-lineだと連続したホワイトスペースは半角スペースひとつぶんとして表示されます)

 

 

<br>に変換するfilterなんていらんかったんや・・・・