1. ホーム
  2. angularjs

[解決済み] angularjsで改行を保持する

2022-04-15 12:18:54

質問

私が見たのは これ SOの質問です。

の代わりに私のコード ng-bind="item.desc"{{item.desc}} を持っているからです。 ng-repeat を前にしています。

そこで私のコード。

<div ng-repeat="item in items">
  {{item.description}}
</div>

項目の説明には \n はレンダリングされない改行のため。

どのようにすれば {{item.description}} があると仮定して、簡単に改行が表示されます。 ng-repeat 上記?

解決方法は?

pilau さんの回答に基づいています - しかし、受け入れられた回答でさえ持っていない改良があります。

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-line;
}

この場合、改行と空白は指定通りに使用されますが、コンテンツの境界でコンテンツが分割されます。ホワイトスペースの詳細については、こちらを参照してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

改行で改行しつつ、複数の空白やテキストの前の空白も崩さないようにしたい場合(コードのレンダリングなどのため)。

white-space: pre-wrap;

レンダリングモードの違いを見事に比較しています。 http://meyerweb.com/eric/css/tests/white-space.html