Zeilenumbrüche im Textbereich beibehalten

74

Ich habe ein Formular mit einem Textbereich und möchte die vom Benutzer bei der Ausgabe des Inhalts eingegebenen Zeilenumbrüche beibehalten.

Zum Beispiel, wenn ich im Textbereich schreibe:

Hier ist ein Satz. Hier ist noch einer. hier ist noch einer.

Dies ist ein neuer Absatz. Hier ist ein neuer Satz. Hier ist noch einer.

Ich möchte die gleiche Ausgabe und nicht :

Hier ist ein Satz. Hier ist noch einer. hier ist noch einer. Dies ist ein neuer Absatz. Hier ist ein neuer Satz. Hier ist noch einer.

Wie kann ich Zeilenumbrüche beibehalten?

html css textarea line-breaks Simon M.
quelle

Antworten:

151

Im Allgemeinen müssen Sie nur hinzufügen

  • white-space: pre-line;Leerzeichen auf ein einzelnes Leerzeichen oder gekürzt

  • white-space: pre-wrap; Alle Leerzeichen bleiben erhalten

zum Stil des Elements (CSS), in dem Ihr Text mit Zeilenumbrüchen gerendert werden soll.

Vaidotas Pocius
quelle
Genial, fantastisch!
Lovecoding
15

Die vom Benutzer eingegebenen Zeilenumbrüche bleiben erhalten, weder HTML noch PHP lassen einfach etwas fallen oder ändern etwas. Das HTML-Markup verwendet jedoch beim Rendern zur Visualisierung eine andere Methode zum Codieren von Zeilenumbrüchen. Dafür gibt es sehr gute Gründe. Sie müssen also die vorhandenen Zeilenumbrüche in Zeilenumbrüche im HTML-Stil "übersetzen".

Wie das geht, hängt von der Umgebung ab, in der Sie arbeiten. In der Regel müssen Sie Zeilenumbruch Codes wie übersetzen \nzu <br>Tags. Die phpSkriptsprache bietet hierfür beispielsweise eine Funktion:nl2br()

Beachten Sie jedoch Folgendes: Dies gilt nur, wenn Sie den Text als HTML-Markup rendern . Dies gilt nicht , wenn Sie den Text erneut in einen Textbereich innerhalb eines Formulars ausgeben, um ihn beispielsweise ändern zu können. In diesem Fall müssen Sie die ursprünglichen Zeilenumbrüche so beibehalten, wie sie empfangen wurden.

Was Sie normalerweise tun, ist: Sie speichern die unveränderte Texteingabe als empfangen. Wenn Sie diesen Text erneut an einen Client ausgeben, beispielsweise nachdem Sie ihn aus einer Datenbank gelesen haben, in der Sie ihn zuvor gespeichert haben, wissen Sie, wie der Text dargestellt wird. In diesem Fall übersetzen Sie die vorhandenen Zeilenumbrüche oder lassen sie unverändert.

Sie können auch unveränderten Text mit Zeilenumbrüchen durch <pre>...</pre>Tags codieren. Markieren Sie sie daher als vorformatiert. Dies geschieht beispielsweise beim Anzeigen von Quellcode auf HTML-Seiten.

Arkascha
quelle
Warum ist dieses Forum voller solcher Fragen, alle mit ähnlichen Antworten, wenn ich dieses Problem seit ungefähr 5 Jahren bei vielen verschiedenen Projekten habe?! Ich habe versucht, Javascript-Hacks, Pre-Tags, CSS-Leerraumregeln zu verwenden, und nichts scheint zu funktionieren. Die meisten dieser Projekte waren Python-Webanwendungen mit Flask oder Pyramid und (natürlich) Javascript. Und normalerweise debugge ich in Chrome, so dass dies der Browser ist, der anscheinend die größten Probleme damit hat. Selbst wenn Sie in dieses Kommentarfeld eingeben und die Eingabetreifen drücken, werden alle Zeilenumbrüche angezeigt! Wie können so viele Leute denken, dass dies kein Problem ist?!?!
Kenny83
Ich entschuldige mich, ich habe gerade bemerkt , dass in der Tat die Zeilenumbrüche wieder gemacht werden , wenn Sie bearbeiten klicken ... beweisen , dass sie sich an den Server gesendet und in der DB gespeichert. Aber ich schwöre, ich hatte dieses Problem öfter als ich in der Vergangenheit zählen kann.
Kenny83
@ Kenny83 Ok, toll, du hast die Idee hinter den Dingen. Wie gesagt: Es gibt gute Gründe für diese beiden Arten, Zeilenumbrüche auszudrücken. Dies bedeutet nicht , dass es in Anwendungen, in denen Zeilenumbrüche entfernt werden, möglicherweise keine Filterschritte gibt. Ich habe nur gesagt, dass es in HTML oder PHP keinen automatischen Filter oder ähnliches gibt.
Arkascha
Ich entschuldige mich, ich wollte nicht als selbstgerechter a $$ abschneiden, was ich offensichtlich habe. Meine Frustration ist einfach auf die Tatsache zurückzuführen, dass ja, viele Menschen kein Problem damit haben, aber ich und andere offensichtlich auch, weshalb sie diese Fragen stellen. Ich denke, wir verstehen einfach nicht wirklich, wie Zeilenumbrüche an den Server usw. gesendet werden. Können Sie mir bitte erklären, warum Sie in den Chrome-Entwicklungstools in der ersten Zeile eines Formularübermittlungs-Handlers einen Javascript-Unterbrechungspunkt platzieren und die Textbereiche überprüfen Wert zeigt "Zeile eins Zeile zwei Zeile drei" anstelle von "Zeile eins \ n Zeile zwei \ n Zeile drei"?
Kenny83
1
Hmm interessant ... danke, ich werde es versuchen. Setzen Sie auch einfach einen Python-Haltepunkt auf dem Server und stellen Sie fest, dass der dort empfangene Wert definitiv "Zeile eins, Zeile zwei, Zeile drei" anstelle von "Zeile eins \ n Zeile zwei \ n Zeile drei" ist ... also vermute ich JQuery, Javascript selbst oder etwas anderes auf der Client-Seite ist im Weg ... trotzdem danke für die Hilfe, ich werde auf jeden Fall einen Hexeditor versuchen :-)
Kenny83
1

Du kannst tun:

white-space: pre-wrap;
overflow-wrap: break-word;
Eden Sharvit
quelle
-1

Sie behalten die Ausgabe im Textbereich bei. Sie würden eine Eingabe als Zeichenfolgenausgabe erhalten, string(write to file)die der Eingabezeichenfolge Textbereich hinzufügt.

for eg.
<?php
$txt = $_POST["inputstr"];
$txt1 = "<textarea>". $txt ."</textarea>";
$file = fopen("file.html","a+");
fwrite($file, $txt1);
fclose($file);
?>
awadhesh
quelle