Zeilenumbruchzeichen in VueJS rendern

Lesezeit: 4 Minuten

Benutzer-Avatar
Schwimmburger

Ich erstelle eine Notiz-App, in der Benutzer eine Notiz hinzufügen können, indem sie mehrzeiligen Text in ein Textfeld eingeben. Wenn ich die Notiz in Firebase speichere, wird sie mit Zeilenumbruchzeichen (\n) gespeichert, die ich visualisieren möchte.

Daher habe ich einen Filter geschrieben, der diese Zeichen durch ersetzt <br /> und das funktioniert super.
Jetzt muss ich meine Daten jedoch rendern {{{note.content}}} und ein Benutzer kann HTML, CSS und JS einfügen, die ausgeführt werden.
Soll ich sowas verwenden DOMreinigen um den Inhalt zu validieren oder gibt es eine Möglichkeit, Zeilenumbrüche sicher zu rendern?

Benutzer-Avatar
Krzysiek

Wie @shelvacu sagte <pre> html-Tag behält Leerzeichen bei.

Die Verwendung hat jedoch einen gravierenden Nachteil: Das Tag selbst erbt viel unnötiges Styling von CSS-Frameworks, die im Projekt verwendet werden (z. B. Bootstrap).

Verwenden Sie Folgendes, um Leerzeichen beizubehalten und das Vererben unnötiger Stile zu vermeiden:

<span style="white-space: pre;">Some whitespaced content</span>

was genau so wirken wird <pre> Schild.

Beachten Sie, dass white-space: pre bleibt Text “wie er ist” – wenn Sie einen zusätzlichen Zeilenumbruch haben möchten, wenn es notwendig ist, verwenden Sie: white-space: pre-wrap.

Sehen: w3schools.com CSS-Leerzeichen-Eigenschaft

  • Ich habe keine CSS-Frameworks verwendet, also bin ich nicht auf dieses Problem gestoßen. Trotzdem sehr hilfreich, danke!

    – Schwimmburger

    5. Januar 2017 um 22:00 Uhr

  • Dies ist für mich die bessere Antwort, da das Einschließen von

     -Tags dazu neigt, die Schriftart mit den meisten CSS-Frameworks zu ändern.
                    
                  
    – Frank
    11. April 2019 um 10:09 Uhr
  • Das hat mich wirklich gerettet. Danke @Krzysiek.
    – Abdellah Ramadan
    9. März 2020 um 15:10 Uhr

Wickeln Sie den Inhalt in a pre Element.

EIN <pre> Element wird VorLeerzeichen darin servieren, zB:

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

Wird darin enden, dass:

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

Auf diese Weise müssen Sie keine Zeilenumbrüche filtern.

  • Das habe ich auch gerade gefunden, danke trotzdem! Ich akzeptiere Ihre Antwort

    – Schwimmburger

    19. April 2016 um 21:24 Uhr


  • sehr schlau, auf diese Idee bin ich noch nie gekommen

    – Lappen

    13. Juli 2018 um 9:29 Uhr

  • Sie können auch die verwenden white-space css-Attribut, das etwas mehr Optionen hat.

    – Glücksdonald

    25. Dezember 2018 um 2:43 Uhr


  • Verwenden white-space: break-spaces; hat bei mir perfekt funktioniert.

    – tmarois

    13. November 2020 um 18:36 Uhr

Verwenden white-space: pre-line; CSS-Eigenschaft.

Wie einschreiben Mozzila Doc zum pre-line Wert:

Sequenzen von Leerraum werden reduziert. Zeilen werden bei Zeilenumbrüchen umgebrochen, bei <br>und nach Bedarf Zeilenfelder zu füllen.

Nachdem ich mein Problem tatsächlich beschrieben hatte, kam ich auf die Idee, das Pre-Tag zu verwenden, das für vorformatierten Text steht. Dieses Tag respektiert '\t\n'-Zeichen und gibt den Text standardmäßig korrekt wieder! Obwohl die Sätze nicht automatisch unterbrochen werden und die Breite überlaufen. Mit einigen CSS konnte ich das gleiche Verhalten erzielen, das andere Elemente haben.

html:

{{note.content}}

CSS:

.note pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}

Ich hoffe, dies würde neuen Besuchern einen Mehrwert bieten.

Eingabe vom Benutzer.

I am big line with lots and lots of text which would make me not fit.

Line two ✌ 
Line three

Eingabe vom Benutzer

Bester Ansatz für die Ausgabe

<span style="white-space: pre-line">Your Content</span>

Beste Annäherungsleistung

Probleme mit anderen Ansätzen

<span style="white-space: pre">Your Content</span>

Führt zusätzlich zu einem Bildlauf auf der y-Achse
mit Pre-Stil

Referenz & weitere Details: https://css-tricks.com/almanac/properties/w/whitespace

  • Dies sollte die akzeptierte Antwort sein. Die Frage betraf das Rendern von "mehrzeiligem Text", nicht das Anzeigen von Leerzeichen oder Blockcode.

    – VengaVenga

    2. April um 20:29 Uhr

Ich bin nicht wirklich ein Fan von pre (außer beim Debuggen!) Hier ist also eine andere Möglichkeit, mit dieser Verwendung umzugehen v-for. dies macht es einfacher, die Formatierung zu optimieren (z. B. möchten Sie vielleicht eine Liste oder etwas anderes verwenden, das keine ist span und br)

<span
   v-for="(line,lineNumber) of stringWithNewlines.split('\n')" 
   v-bind:key="lineNumber" >
  {{ line }}<br/>
</span>

  • Dies sollte die akzeptierte Antwort sein. Die Frage betraf das Rendern von "mehrzeiligem Text", nicht das Anzeigen von Leerzeichen oder Blockcode.

    – VengaVenga

    2. April um 20:29 Uhr

Benutzer-Avatar
Ketan Akbari

Ich kann es mit Backticks (`) zum Laufen bringen

<pre>{{textRenderedAsItIs}}</pre>

data():{
  return{
    textRenderedAsItIs:`Hello
                        World`
   }
}

1204750cookie-checkZeilenumbruchzeichen in VueJS rendern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy