HTML - Newline char dans la DIV de contenu modifiable?

Je suis le stockage de contenu dans la base de données, par exemple:

Hello
This
is 
Text

et quand je passe que pour un textarea, il reste avec la nouvelle sauts de ligne. Mais si je passe ce texte à un div avec un contenu modifiable, ça reste comme ceci:

Hello This is Text

Comment puis-je résoudre ce problème?

  • Merci pour cette question. J'étais fatigué de frapper ma tête autour de lui, mais ne pouvait pas trouver un solution pour ce.
InformationsquelleAutor Afonso Luis | 2013-09-26
  1. 115

    Définir un style de la div: white-space: pre ou white-space: pre-wrap

    Exemple: http://jsfiddle.net/fPv6S/

    • Cette réponse mérite beaucoup plus de pouce-ups. Si quelqu'un a besoin d'infos sur white-space (personnellement, je suis allé avec pre-wrap): developer.mozilla.org/en-US/docs/Web/CSS/white-space
    • ou même white-space:pre-line
    • Ce style rend div sortie des retours à la ligne comme des retours à la ligne, mais si vous copiez et collez le contenteditable zone, les retours à la ligne sont ignorés.
    • cette question est à propos contenteditable, pas sur le textarea
    • Il ne fonctionne pas dans chrome sur android pour une raison quelconque? est-ce un bug? Je pense que chrome crée des divs pour faire de nouvelles lignes 🙁
    • J'ai essayé word-wrap: break-word; mais white-space: pre fonctionne pour moi

    InformationsquelleAutor Explosion Pills
  2. 5

    Pour ajouter quelques infos sur @Explosion Pilules réponse correcte et en extraire des informations à partir de MDN:

    Le CSS white-space attribut est là pour vous aider:

    pré:

    white-space: pre

    Séquences de l'espace blanc sont conservés. Les lignes ne sont brisés à la
    caractères de saut de ligne dans la source et à <br> éléments.

    Cela pourrait entraîner des barres de défilement horizontales comme le montre l'exemple!

    pre-wrap:

    white-space: pre-wrap

    Séquences de l'espace blanc sont conservés. Les lignes sont brisés à saut de ligne
    les personnages,<br>, et, si nécessaire, à la ligne de remplissage des boîtes.

    Comme @ceremcem souligné les sauts de ligne à la fin de la zone ne seront pas transférés lorsque le texte est de copier-coller, ce qui est logique puisque ces sauts de ligne ne font pas partie de la mise en forme du texte, mais plutôt de l'apparence.

    pré-ligne:

    white-space: pre-line

    Séquences de l'espace blanc sont effondrés. Les lignes sont brisés à saut de ligne
    les personnages,<br>, et, si nécessaire, à la ligne de remplissage des boîtes.

    CSS:

    div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}

    HTML:

    <h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

    MODIFIER 08/14/2018:

    Dans Chrome, vous risquez de rencontrer des problèmes: en Appuyant sur Entrée va générer un nouveau <div> à l'intérieur de votre contenteditable. Pour empêcher cela, vous pouvez appuyer sur Maj+Entrée ou set display: inline à la contenteditable <div> comme on le voit dans la tripoter.

    InformationsquelleAutor Sebbas
  3. 2

    Vous pouvez chercher et remplacer les retours à la ligne avec <br />.
    http://jsfiddle.net/fPv6S/1/

    InformationsquelleAutor andi
  4. 2

    De l'essayer......

    var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");

    Qui va le faire...

    InformationsquelleAutor Subham Debnath