Meilleures pratiques: affichage du texte saisi via une zone de texte multiligne

Question

J'ai une zone de texte multiligne. Lorsque les utilisateurs tapent simplement, la zone de texte enveloppe le texte et elle est enregistrée comme une seule ligne. Il est également possible que les utilisateurs peuvent entrer dans les sauts de ligne, par exemple lors de la saisie d'une liste « comme » puces:

Here are some suggestions: 
- fix this 
- remove that 
- and another thing 

Maintenant, le problème se produit lorsque je tente d'afficher la valeur de ce champ. Afin de préserver le formatage, j'enveloppe actuellement la présentation dans <pre> - cela fonctionne pour préserver les ruptures fournies par l'utilisateur, mais quand il y a beaucoup de texte enregistré comme une seule ligne, il affiche le bloc de texte entier comme une seule ligne, résultant en horizontal le défilement étant nécessaire pour tout voir.

Existe-t-il une façon élégante de gérer ces deux cas?

Answer 1

La solution la plus simple consiste à transformer tous les sauts de ligne \n en sauts de ligne <br>. En PHP par exemple, ceci est fait en utilisant la fonction nl2br().

Si vous voulez quelque chose d'un peu plus sophistiqué - comme la liste que vous citez converti en un vrai HTML <ul> par exemple - vous pourriez considérer un simple "langage" comme Markdown que SO utilise. Il est livré avec des règles simples, naturelles comme

# Heading 1 
## Heading 2 
### Heading 3 

* Unordered List item 
* Unordered List item 

1. Numbered List item 
2. Numbered List item 

etc ....

Answer 2

Vous pouvez utiliser la fonction php nl2br() Il transforme les sauts de ligne en
éléments

Answer 3

Convertir des caractères à <br /> balises de saut de ligne explicitement, et laisser le navigateur word-wrap le texte normalement. Cela préserve les pauses que le visiteur est entré, sans nuire aux autres paragraphes.

Answer 4

Je remplacerais normalement tous CR/LF avec LF, puis remplacer tous LF avec <br />. Vous pouvez ensuite rendre ce texte dans n'importe quel conteneur HTML que vous voulez et le laisser circuler naturellement.

Answer 5

Vous pouvez remplacer les sauts de ligne par des sauts de ligne HTML.

Remplacez "\r\n" ou "\n" (en fonction du navigateur et de la plate-forme, vérifiez d'abord pour un plus long) avec <br/>.