Conserver les nouvelles lignes en HTML, mais envelopper le texte: possible?

Question

Je suis tombé sur un problème intéressant aujourd'hui. J'ai un email de texte que j'envoie d'une page Web. J'affiche un aperçu et je voulais mettre l'aperçu dans une police fixe en conservant l'espace blanc puisque c'est ainsi que le message en texte brut apparaîtra.

Fondamentalement, je veux quelque chose qui va agir comme Bloc-notes: les retours à la ligne signaleront une nouvelle ligne, mais le texte sera envelopper pour s'adapter à l'intérieur de son conteneur.

Malheureusement, cela s'avère difficile à moins que je ne manque quelque chose de vraiment évident. J'ai essayé:

1. CSS white-space: pre. Cela conserve l'espace blanc mais n'emballe pas les lignes de texte afin qu'ils sortent des frontières sur de longues lignes; Styler un élément de zone de texte à lire uniquement sans bordure de sorte qu'il ressemble à div. Le problème ici est que IE n'aime pas 100% de hauteurs sur les textareas en mode strict. Bizarrement c'est OK avec eux en mode bizarreries mais ce n'est pas une option pour moi.

2. CSS white-space: prewrap. Ceci est CSS 2.1 donc probablement pas largement supporté (je suis heureux si elle est prise en charge dans IE7 et FF3 cependant, je ne me soucie pas de IE6 pour cela comme une fonction d'administration et personne ne sera en cours d'exécution IE6 qui utilisera cette page) .

Autres suggestions? Cela peut-il être si difficile?

edit: ne peut pas commenter plus d'informations. Oui en ce moment j'utilise la police Courier New (c'est-à-dire la largeur fixe) et en utilisant une regex côté serveur pour remplacer les newlines avec les tags <br> mais maintenant je dois éditer le contenu et ça me frappe comme si je devais déshabiller et ajoutez les <br> s pour le faire fonctionner.

est-il pas de meilleure façon?

Answer 1

Essayez

selector { 
    word-wrap: break-word; /* IE>=5.5 */ 
    white-space: pre; /* IE>=6 */ 
    white-space: -moz-pre-wrap; /* For Fx<=2 */ 
    white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/ 
} 

Answer 2

Vous pourriez peut-être utiliser un RichTextEditor (tel que FreeTextBox) pour afficher le texte.

Set Courier, désactiver/masquer la police de l'éditeur, les barres d'outils ...

Answer 3

remplacez toutes votre ligne dure rompt avec <br/> et mettre le texte en div avec la largeur désirée. Vous pouvez faire la même chose avec des espaces: Remplacez-les par  .

Assurez-vous de faire cela après vous échapper les caractères spéciaux en HTML, sinon les
ne sont pas interprétés mais imprimés sur la page.

Answer 4

créer une étiquette <pre></pre> ou utiliser quelque chose comme
<p style="width:800px"> .... </p>

avec une largeur fixe, je pense que le texte sont enveloppés

Answer 5

Essayez de remplacer les doubles espaces avec    - qui devrait travailler pour rendre votre double les espaces passent.

Crack tous ces nouvelle ligne et dure entre <br />.

style la sortie de texte pour la faire ressembler à une largeur fixe avec la famille de polices:

font-family:monospace; 

Vous devrez peut-être de la taille il correctement, quelque chose de plus petit que le texte qui l'entoure, mais qui donnera le look d'un PRE, et à quoi ressemblera un email en texte brut.

Mettez tout cela dans un DIV avec un fixe avec et qui pourrait valoir le coup d'oeil.