Lorsque vous travaillez sur le front-end, je pense que vous avez tous rencontré l'utilisation de la zone de texte de contrôle de texte multiligne pour saisir des données, le retour chariot multi-paragraphes et le saut de ligne, mais lorsque la page est affichée, le saut de ligne ne fonctionne pas. Y a-t-il un moyen de le résoudre? Introduisez deux méthodes que je pense être les plus simples.
One, méthode de remplacement JS
<input id="content" value="${content}" type="hidden" />
<span id="contentshow"></span>
<script>
var element = $("#content").val();
var temp = element.replace(/\n/g,'<br/>');
$("#contentshow").html(temp);
</script>
Deux, méthode de style CSS
#contentshow {
white-space: pre-wrap; }
Il n’y a rien de mal, c’est aussi simple que cela, revoyons le passé
La propriété white-space définit comment gérer les espaces blancs dans l'élément.
| évaluer | la description |
|---|---|
| Ordinaire | défaut. Les blancs seront ignorés par le navigateur. |
| pré | Le blanc sera réservé par le navigateur. Son comportement est similaire à celui de la balise <pre> en HTML. |
| Nowrap | Le texte ne sera pas enveloppé et le texte continuera sur la même ligne jusqu'à ce qu'il rencontre la balise <br>. |
| pré-emballer | La séquence d'espaces blancs est préservée, mais les sauts de ligne sont effectués normalement. |
| pré-ligne | Combinez des séquences d'espaces, mais conservez les retours à la ligne. |
| hériter | Spécifie que la valeur de l'attribut d'espace blanc doit être héritée de l'élément parent. |