Zeilenumbrüche in Winkel beibehalten

176

Ich habe diese SO-Frage gesehen.

Mein Code wird nicht ng-bind="item.desc"verwendet, {{item.desc}}weil ich einen ng-repeatvorher habe.

Also mein Code:

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

Die Artikelbeschreibung enthält \nfü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-repeatoben genannten habe?

Diolor
quelle
In ein <pre> -Tag einfügen?
aet
88
Durch Styling der Hülle divmit style="white-space:pre-wrap;".
Stewie
1
Der Kommentar von @Stewie funktioniert perfekt für mich (AngularJS 1.2.18). Er zeigt explizit, wie das einzelne Element formatiert wird (im Gegensatz zur Lösung von Pilau und Paul Weber), und es ist nicht erforderlich, die Stile des <pre> -Tags wie andere zu ändern vorgeschlagen.
Andre Holzner
Sie haben Recht, ich nahm an, dass jeder weiß, wie man einfaches CSS verwendet und eine Klasse auf ein Element anwendet. Wenn Stewie seinen Kommentar als Antwort gepostet hätte, wäre es besser für ihn gewesen. Obwohl es scheint, als ob er genug Punkte hat ...
Paul Weber
Ich stimme zu, @Stewie hätte seinen Kommentar definitiv als Antwort formatieren sollen. Es hat mein Problem perfekt behoben.
CF_HoneyBadger

Antworten:

284

Basierend auf der Antwort von @pilau - aber mit einer Verbesserung, die selbst die akzeptierte Antwort nicht hat.

<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-wrap;
}

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:

white-space: pre-line;

Schöner Vergleich der verschiedenen Rendering-Modi: http://meyerweb.com/eric/css/tests/white-space.html

Paul Weber
quelle
1
Beste Lösung hier IMO, da es nicht zu einer Mono-Spaced-Schriftart wie vor neu formatiert wird.
Troels Larsen
1
Beachten Sie den Leerraum vor dem Text, der erhalten bleibt.
Silver Paladin
1
Da Sie es angesprochen haben, wäre es nicht pre-linedas bevorzugte? Es ist näher an der Art und Weise, wie HTML normalerweise den Textinhalt seiner Knoten rendert und dennoch die Zeilenumbrüche bewahrt.
Aaki
Hmm ... Sie haben Recht, Pre-Line ist die bessere Lösung, nachdem ich nicht mehr sicher bin, warum ich Pre-Wrap anstelle von Pre-Line wähle. Vielleicht ist die Browserunterstützung für Preline nicht so gut? Aber ich werde dies zur Antwort hinzufügen ... Hier ist ein Vergleich der Renderings: meyerweb.com/eric/css/tests/white-space.html
Paul Weber
Dies sollte die akzeptierte Antwort sein! pre-lineist der Weg zu gehen. Danke Paul!
Demisx
126

Versuchen:

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

Der <pre>Wrapper druckt Text \nals Text

Auch wenn Sie den JSON drucken, verwenden Sie zum besseren Aussehen jsonFilter wie:

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

Demo

Ich bin damit einverstanden, @Paul Weberdass dies white-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)

Maxim Shoustin
quelle
Die item.description ist Text, der die \nBereiche enthält, die ich nicht kenne, nicht am Ende. Ich denke ich brauche das prebasierend auf deiner Bearbeitung.
Diolor
29
Oft ist ein <pre> -Tag keine gute Lösung, da es den Text in Kurier umwandelt und den Stil der Seite bricht. Der Stil = "Leerraum: Pre-Wrap;" Lösung scheint eine bessere Lösung zu sein (zumindest für meine Situation)
CF_HoneyBadger
1
@CF_HoneyBadger gut, denn Ihre @pilauAntwort ist richtig, aber es bedeutet nicht, dass meine falsch ist, und deshalb wurde ich herabgestimmt
Maxim Shoustin
Ich habe versucht, alle zu konvertieren \n, <br/>und dann wurden diese Tags natürlich nicht als HTML-Markup gerendert ... nach all dieser Konvertierung wurde Ihre styleLö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!
Twknab
Dies funktioniert für Code, jedoch nicht zum Anzeigen von Nachrichten an Benutzer. Ich denke, Pauls Antwort ist die richtige
Quintonn
63

Mit CSS ist es so einfach (es funktioniert, ich schwöre).

.angular-with-newlines {
  white-space: pre;
}
  • Schau ma! Keine zusätzlichen HTML-Tags!
Pilau
quelle
@pilau Ich möchte den Text umbrechen, wenn er Komma (,) und kein Leerzeichen enthält. Wie kann ich das tun?
Shylendra Madda
@shylendra Meine Lösung umschließt keinen Text, sondern verhält sich wie in einem preTag. Vielleicht eine andere Frage öffnen? Oder habe ich deinen Standpunkt verfehlt?
Pilau
Ich habe mich über die Kompatibilität des Browsers gewundert. Laut dieser Tabelle scheint es in allen gängigen Browsern zu funktionieren. Es ist viel weniger mühsam, als Zeilenumbrüche durch br-Tags zu ersetzen. Vielen Dank! Achten Sie einfach darauf, den Code so zu formatieren, dass er keine Leerzeichen enthält. Sie werden natürlich angezeigt. developer.mozilla.org/en-US/docs/Web/CSS/white-space
Paul Weber
Es könnte noch besser sein, Leerzeichen zu verwenden: Pre-Wrap, sonst wird der Inhalt niemals umbrochen.
Paul Weber
16

Mit CSS kann dies leicht erreicht werden.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

Zu diesem Zweck kann auch eine CSS-Klasse erstellt und aus einer externen CSS-Datei verwendet werden

Rehan
quelle
2

Nun, es hängt davon ab, ob Sie Daten binden möchten, es sollte keine Formatierung enthalten, sonst können bind-htmlund können Sie description.replace(/\\n/g, '<br>') nicht sicher sein, ob es das ist, was Sie wollen.

Nicolas Brugneaux
quelle
1

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):

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

Verwenden:

<div class="pre">{{item.description}}</div>

Es wird lediglich jeder Teil des Textes in ein <p>Tag eingeschlossen. Danach können Sie es nach Belieben stylen.

Dmitry Efimenko
quelle
1

Fügen Sie dies einfach Ihren Stilen hinzu, das funktioniert für mich

white-space: pre-wrap

Durch diesen Text <textarea>kann in angezeigt werden, wie es dort mit Leerzeichen und Linienbremsen ist

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}
Akitha_MJ
quelle
0

Verwenden 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!

Siddhartha Thota
quelle
0

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:

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

Auf diese Weise können Sie Klassen auf die Absätze anwenden und sie mit CSS gut formatieren.

Chris Rae
quelle