Retour automatique à la ligne sans casser des mots

J'ai travaillé avec l'envoi d'un format HTML e-mail à l'aide d'un serveur web, et jusqu'à présent, il a été bon (contenu et tous les affiche bien), sauf pour le retour automatique à la ligne. Une seule ligne de texte (saisie de l'utilisateur) peut aller sur et sur et produit une barre de défilement horizontale sur populaire e-mail des clients web.

Alors je suis allé faire quelques recherches. J'ai mis en place <div style="width: 100%; word-break: break-word;"><!-- Content here --></div> et cela a fonctionné parfaitement bien, à l'exception que il a commencé à réduire mes mots. Ce que je voudrais faire est de les faire aller à la ligne suivante, tout en conservant le retour.

En ligne d'autres sources disent que le <div> balise ne faire retour automatique, mais dans le web, les clients il ne fonctionne pas de cette façon. Je suppose que ce pourrait être en raison de derrière-le-scènes CSS, mais je n'ai pas vraiment d'aller enquêter.

N'quelqu'un a des solution ou une suggestion à mon problème? Je ne voudrais pas faire de serveur-côté mise en forme; tout d'abord, je pense que c'est une douleur dans le cul, et d'autre part je pense qu'il serait différente entre les différents web les clients de messagerie... merci!

InformationsquelleAutor matt | 2012-11-13
  1. 2

    Essayez d'ajouter cette propriété supplémentaire:

    white-space: pre-line;
word-wrap: break-word;

    Voir cette référence pour l'explication des valeurs possibles: http://www.w3schools.com/cssref/pr_text_white-space.asp

    • Il ne semble pas fonctionner pour moi... 🙁
    • Avez-vous un modèle en ligne quelque part?
    • C'est mon code qui m'a... j'ai converti tous les espaces de &nbsp; et c'est finalement devenu un entier long chaîne de caractères. La retirer et de l'application de la white-space: pre-line; style merveille, merci!!
    InformationsquelleAutor Patrick Moore
  2. 2

    C'est en effet quelque chose de derrière les scènes qui empêche normal de l'emballage. Nous avons vraiment besoin de voir derrière les coulisses, ou au moins à les coulisses, pour analyser la situation, mais dans un cas simple, l'ajout de cette CSS (sur la div) devrait t'aider:

    white-space: normal;

    C'est la valeur initiale, mais sans doute remplacé par quelque chose. Si cela ne fonctionne pas, essayez

    white-space: normal !important;

    Éviter word-break: break-word, parce que c'est vraiment sauts de mots, comme le nom le suggère. Il est conçu pour l'utilisation avec les systèmes d'écriture qui permettent des sauts de n'importe où.

    • En fait j'ai besoin d'elle pour être white-space: pre-line;, parce que j'ai besoin de préserver l'entrée de l'utilisateur. Je n'ai jamais su qu'il y avait une propriété CSS appelé white-space, parce que j'étais à remplacer tous mes espaces avec &nbsp;s... Merci!
    InformationsquelleAutor Jukka K. Korpela