Saut de ligne en HTML avec '\ n'

Réponses:

354

C'est pour montrer la nouvelle ligne et retourner le chariot en html, alors vous n'avez pas besoin de le faire explicitement. Vous pouvez le faire en CSS en définissant la valeur de pré-ligne de l'attribut d'espace blanc.

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
la source
13
Vous pouvez également utiliser white-space: pre-wrapsi vous souhaitez conserver également l'espace des onglets.
Vijay Shegokar
124

Vous pouvez utiliser la white-spacepropriété CSS pour \n. Vous pouvez également conserver les onglets comme dans \t.

Pour un saut de ligne \n:

white-space: pre-line;

Pour les sauts de ligne \net les tabulations \t:

white-space: pre-wrap;

Darlesson
la source
Il est disponible depuis longtemps et est pris en charge par tous les principaux navigateurs .
Darlesson
23

Selon votre question, cela peut se faire de différentes manières: - Par exemple, vous pouvez utiliser:

Si vous souhaitez insérer une nouvelle ligne dans la zone de texte, vous pouvez essayer ceci: -

&#10;Saut de ligne et &#13;retour chariot

<textarea>Hello &#10;&#13;Stackoverflow</textarea>

Vous pouvez également du <pre>---</pre>texte préformaté.

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

Ou, vous pouvez utiliser le <p>----</p>paragraphe

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Remarque: si vous souhaitez utiliser, \nvous devez installer un serveur comme Xampp ou Apache pour prendre en charge la langue côté serveur

Sampad
la source
5
Pourriez-vous développer votre dernière note? Je ne comprends pas pourquoi vous pensez que le support côté serveur est requis pour cela ...
Shadow
La dernière phrase ici est objectivement fausse, comme l'ont démontré plusieurs autres réponses. Et même s'il n'était pas pris en charge nativement, vous pouvez facilement le modifier avec JavaScript côté client.
John Montgomery
13

Vous pouvez utiliser la <pre>balise

<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>

Johan Brännmar
la source
12

vous pouvez utiliser la <pre>balise:

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>

Ehsan
la source
5

L'utilisation white-space: pre-linevous permet de saisir le texte directement dans le HTML avec des sauts de ligne sans avoir à utiliser\n

Si vous utilisez la innerTextpropriété de l'élément via JavaScript sur un élément non pré par exemple a <div>, les \nvaleurs seront remplacées par <br>dans le DOM par défaut

  • innerText: remplace \npar<br>
  • innerHTML, textContent: nécessite l'utilisation d'un stylewhite-space

Cela dépend de la façon dont vous appliquez le texte, mais il existe un certain nombre d'options

const node = document.createElement('div');
node.innerText = '\n Test \n One '
Drenai
la source
4

Simple et linéaire:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>
Alessandro Ornano
la source
2

Vous devriez envisager de remplacer vos freins de ligne par <br/>. En HTML, un saut de ligne ne représentera que la nouvelle ligne dans votre code.

Vous pouvez également utiliser d'autres balises HTML comme placer vos lignes dans des paragraphes:

<p>Sample line</p>
<p>Another line</p>

ou d' autres emballages comme par exemple <div>sample</div>avec l' attribut css: display: block.

Vous pouvez également utiliser <pre>. Le contenu de preaura son style html ignoré. En d'autres termes, il affichera du HTML pur avec des \nfreins normaux

Luc
la source