Zeilenumbrüche in Winkel beibehalten

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?

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

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)

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

.angular-with-newlines {
  white-space: pre;
}

• Schau ma! Keine zusätzlichen HTML-Tags!

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

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.

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.

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
}

Ja, ich würde entweder das <pre>Tag oder ng-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 /nzu<br />

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!

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.