web-dev-qa-db-fra.com

Comment afficher une étiquette contenant du texte avec des sauts de ligne?

J'ai mis du texte dans un <textarea> comme ça:

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

Mais cela se voit dans un <label> comme ça:

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

Comment puis-je lui donner la même apparence que dans un <textarea>?

htmlcsslabelline-breaks
14
ubuntu

Donnez l'étiquette white-space: pre-wrap et il coupera la ligne comme le fait la zone de texte

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>

Outre le white-space propriété combinée avec un nouveau caractère de ligne (par exemple \n), la manière HTML de couper la ligne utilise <br>, ajoutez ici un petit exemple de leur fonctionnement et de leur différence.

Notez que même l'espace est préservé en utilisant par exemple white-space: pre, comme le montre l'exemple de code "en ligne"

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

Il n'y a aucun moyen d'ajouter des balises HTML dans un <textarea> tag, donc formatage avec css par exemple ou en utilisant <br> les balises ne fonctionneront pas.

À présent, <textarea rows="4" cols="20">, c'est disons le mieux que vous puissiez faire: vous définissez le nombre minimum de lignes à afficher comme "4" et le nombre minimum de caractères par ligne: "20".

La meilleure méthode consiste à utiliser <div contenteditable="true"></div> dans lequel vous pouvez utiliser des balises comme <br> et également le style CSS.

1
arch1ve

Si vous récupérez du texte dans la zone de texte elle-même, lorsque nous appuyons sur Entrée dans la zone de texte, cela crée un nouveau retour de ligne. Vous pouvez remplacer ce retour de nouvelle ligne par

/n, /r with <br>

0
pradeep1991singh