Ich habe diese SO-Frage gesehen.
Mein Code wird nicht ng-bind="item.desc"
verwendet, {{item.desc}}
weil ich einen ng-repeat
vorher habe.
Also mein Code:
<div ng-repeat="item in items">
{{item.description}}
</div>
Die Artikelbeschreibung enthält \n
für Zeilenumbrüche, die nicht gerendert werden.
Wie kann die {{item.description}}
Anzeige der Zeilenumbrüche leicht unter der Annahme erfolgen, dass ich die ng-repeat
oben genannten habe?
angularjs
angularjs-ng-repeat
Diolor
quelle
quelle
div
mitstyle="white-space:pre-wrap;"
.Antworten:
Basierend auf der Antwort von @pilau - aber mit einer Verbesserung, die selbst die akzeptierte Antwort nicht hat.
Dies verwendet wie angegeben Zeilenumbrüche und Leerzeichen, unterbricht jedoch auch den Inhalt an den Inhaltsgrenzen. Weitere Informationen zur White-Space-Eigenschaft finden Sie hier:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Wenn Sie Zeilenumbrüche unterbrechen möchten, aber auch mehrere Leerzeichen oder Leerzeichen vor dem Text reduzieren möchten (sehr ähnlich dem ursprünglichen Browserverhalten), können Sie Folgendes verwenden, wie @aaki vorgeschlagen hat:
Schöner Vergleich der verschiedenen Rendering-Modi: http://meyerweb.com/eric/css/tests/white-space.html
quelle
pre-line
das bevorzugte? Es ist näher an der Art und Weise, wie HTML normalerweise den Textinhalt seiner Knoten rendert und dennoch die Zeilenumbrüche bewahrt.pre-line
ist der Weg zu gehen. Danke Paul!Versuchen:
Der
<pre>
Wrapper druckt Text\n
als TextAuch wenn Sie den JSON drucken, verwenden Sie zum besseren Aussehen
json
Filter wie:Demo
Ich bin damit einverstanden,
@Paul Weber
dass dieswhite-space: pre-wrap;
sowieso ein besserer Ansatz ist<pre>
- der schnelle Weg, hauptsächlich zum Debuggen einiger Dinge (wenn Sie keine Zeit mit dem Styling verschwenden möchten)quelle
\n
Bereiche enthält, die ich nicht kenne, nicht am Ende. Ich denke ich brauche daspre
basierend auf deiner Bearbeitung.@pilau
Antwort ist richtig, aber es bedeutet nicht, dass meine falsch ist, und deshalb wurde ich herabgestimmt\n
,<br/>
und dann wurden diese Tags natürlich nicht als HTML-Markup gerendert ... nach all dieser Konvertierung wurde Ihrestyle
Lösung gefunden und dies ist eine unglaubliche Hilfe und Vereinfachung ... jetzt tue ich es nicht Ich muss weiterhin alle meine Backend-Daten konvertieren und nur ein paar Änderungen in der Ansicht vornehmen ... Sie verdienen +1000!Mit CSS ist es so einfach (es funktioniert, ich schwöre).
quelle
pre
Tag. Vielleicht eine andere Frage öffnen? Oder habe ich deinen Standpunkt verfehlt?Mit CSS kann dies leicht erreicht werden.
Zu diesem Zweck kann auch eine CSS-Klasse erstellt und aus einer externen CSS-Datei verwendet werden
quelle
Nun, es hängt davon ab, ob Sie Daten binden möchten, es sollte keine Formatierung enthalten, sonst können
bind-html
und können Siedescription.replace(/\\n/g, '<br>')
nicht sicher sein, ob es das ist, was Sie wollen.quelle
Die CSS-Lösung funktioniert, Sie haben jedoch keine wirkliche Kontrolle über das Styling. In meinem Fall wollte ich nach dem Zeilenumbruch etwas mehr Platz. Hier ist eine Direktive, die ich erstellt habe, um damit umzugehen (Typoskript):
Verwenden:
Es wird lediglich jeder Teil des Textes in ein
<p>
Tag eingeschlossen. Danach können Sie es nach Belieben stylen.quelle
Fügen Sie dies einfach Ihren Stilen hinzu, das funktioniert für mich
Durch diesen Text
<textarea>
kann in angezeigt werden, wie es dort mit Leerzeichen und Linienbremsen istHTML
CSS
quelle
Ja, ich würde entweder das
<pre>
Tag oderng-bind-html-unsafe
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (verwenden Sie ng-bind-html, wenn Sie 1.2+ verwenden) verwenden, nachdem Sie.replace()
to verwendet haben wechseln/n
zu<br />
quelle
ng-bind-html-unsafe
ist veraltetVerwenden Sie einfach den CSS-Stil "White-Space: Pre-Wrap" und Sie sollten bereit sein zu gehen. Ich hatte das gleiche Problem, bei dem ich Fehlermeldungen verarbeiten muss, für die die Zeilenumbrüche und Leerzeichen wirklich besonders sind. Ich habe gerade diese Inline hinzugefügt, in der ich die Daten gebunden habe, und es funktioniert wie Charm!
quelle
Ich hatte ein ähnliches Problem wie Sie. Ich bin nicht so begeistert von den anderen Antworten hier, weil sie es Ihnen nicht wirklich erlauben, das Newline-Verhalten sehr einfach zu gestalten. Ich bin nicht sicher, ob Sie die Kontrolle über die Originaldaten haben, aber die Lösung, die ich gewählt habe, bestand darin, "Elemente" von einem Array von Zeichenfolgen zu einem Array von Arrays zu wechseln, wobei jedes Element im zweiten Array eine Textzeile enthielt . Auf diese Weise können Sie Folgendes tun:
Auf diese Weise können Sie Klassen auf die Absätze anwenden und sie mit CSS gut formatieren.
quelle