wake-up-neo.com

Wie zeige ich eine Beschriftung mit Zeilenumbrüchen an?

Ich habe Text in ein <textarea> so was:

First day
1-one Apple.
2-one orange.
3-two cups of milk.

Aber es zeigt in einem <label> so was:

First day 1- one Apple. 2-one orange. 3- two cups of milks.

Wie mache ich es genauso wie in einem <textarea>?

htmlcsslabelline-breaks
14
ubuntu

Gib das Etikett white-space: pre-wrap und es bricht die Linie wie der Textbereich

textarea {
  height: 70px;
}
label {
  white-space: pre-wrap;
}
<textarea>
  First day
1-one Apple.
2-one orange.
3-two cups of milk.
</textarea>

<br><br>

<label>
  First day
1-one Apple.
2-one orange.
3-two cups of milk.
</label>

Neben dem white-space Eigenschaft kombiniert mit einem neuen Zeilenzeichen (z. B. \n), die HTML-Methode zum Zeilenumbruch verwendet <br>, füge hier ein kleines Beispiel hinzu, wie sie funktionieren und sich unterscheiden.

Beachten Sie, dass auch Leerzeichen erhalten bleiben, wenn Sie beispielsweise white-space: pre, wie im "Inline" -Codebeispiel zu sehen

var sample_script = document.querySelector('.sample.script');

var name = "One Two Three";
var name1 = name.replace(/ /g, '\n');
var name2 = name.replace(/ /g, '<br>');

sample_script.innerHTML += name1;
sample_script.innerHTML += "<br><br>";
sample_script.innerHTML += name2;
div.pre {
  white-space: pre;
}


/*  styling for this demo  */
body {display: flex;}
.sample {flex: 1; margin: 0 20px;}
<div class="sample inline">

  Inline
  <hr>
  <div>
    One
    Two
    Three
  </div>

  <div class="pre">
    One
    Two
    Three
  </div>
</div>

<div class="sample script">
  Script
  <hr>

</div>
36
LGSon

Es gibt keine Möglichkeit, HTML-Tags in ein <textarea> - Tag einzufügen. Daher funktioniert das Formatieren mit CSS oder die Verwendung von <br> - Tags nicht.

Nehmen wir nun <textarea rows="4" cols="20"> An, Sie können das Beste tun: Sie definieren die Mindestanzahl der anzuzeigenden Zeilen als "4" und die Mindestanzahl der Zeichen pro Zeile als "20".

Die beste Methode ist jedoch die Verwendung von <div contenteditable="true"></div>, In der Sie Tags wie <br> Und CSS-Stile verwenden können.

1
arch1ve

Wenn Sie Text aus dem Textbereich selbst abrufen, geben Sie mit der Eingabetaste einen Textbereich ein, der einen Zeilenumbruch erzeugt. Sie können diesen Zeilenumbruch durch ersetzen

/n, /r with <br>

0
pradeep1991singh