web-dev-qa-db-fra.com

Nouvelles lignes de texte dans une div

J'ai un petit problème lié au moment où je place un texte chargé via un appel ajax.

Je prends le contenu d'une zone de texte et le stocke dans ma base de données et lorsque je veux afficher le texte dans une div, il ne respecte pas les nouvelles lignes, donc tout le texte est continu.

Le code suivant montre un petit exemple:

$(function() {
    $('.buttonA').click(function() {
        $('.message').html($('textarea[name="mensaje"]').val());
    });
});
.message {
    width:300px;
    height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<textarea name="mensaje" class="new_message_textarea" placeholder="enter message..."></textarea>
<button class="buttonA">Enter</button>
<div class="message"></div>

Si vous tapez du texte avec de nouvelles lignes, une fois que vous avez cliqué sur le bouton, le texte s'affiche dans la div et voit que les nouvelles lignes ne s'affichent pas.

Comment puis-je résoudre ça?

htmltextarea
37
domoindal

Les caractères de nouvelle ligne ne font rien au rendu html. Changez ceci dans votre js:

$('.message').html($('textarea[name="mensaje"]').val());

...pour ça:

$('.message').html($('textarea[name="mensaje"]').val().replace(/\n/g, "<br />"));

... et il remplacera vos nouvelles lignes par un saut de ligne html approprié

12
JoeCortopassi

Je pense qu'une meilleure façon d'y parvenir est d'ajouter

white-space: pre

ou

white-space: pre-wrap

style à votre div. voir HTML - Caractère de nouvelle ligne dans le contenu DIV modifiable?

108
Chris.Zou

Ajoutez ceci au CSS:

white-space: pre-line
18
Cong Lance