Enveloppe de mot de passe compatible avec le navigateur et espace: pré?

Question

J'ai besoin de texte à l'intérieur d'une div pour être conservé et emballé. Jusqu'à présent, j'ai du mal à trouver une solution. La meilleure solution que j'ai pu trouver ne fonctionne pas pour tous les navigateurs.

Les travaux suivants dans Chrome et IE6 +, mais dans Firefox le texte ne s'enroule pas.

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

J'ai trouvé que pour une raison quelconque, le texte ne s'enroule pas dans Firefox avec un espace blanc: pré. Et -moz-pré-wrap ne fonctionne pas dans Firefox 3.5 (pourquoi ??), seulement pré-wrap. MAIS quand j'ajoute pré-wrap à la liste, IE 6 et 7 ne fonctionnent pas. Très frustrant.

Le code:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre; 
    word-wrap: break-word; 
} 

Answer 1

Les propriétés CSS3 ne fonctionnent pas toujours comme nous les aimons travailler :). Pourtant, je ne vois pas de point dans le mélange white-space:pre et word-wrap:break-word.

Le premier n'enveloppera pas le texte à moins qu'une balise <br /> ne soit rencontrée. Le second fera le contraire: cassez les mots quand c'est nécessaire, même au milieu d'un mot. Ils semblent être en conflit, et les réponses les plus évidentes pour lesquelles les différents navigateurs réagissent différemment à ces propriétés est que

• ils soutiennent l'une des deux propriétés
• car ils sont en conflit, la priorité est définie ou différent dans chaque navigateur

(Je ne peux pas être sûr cependant, je ne suis pas vraiment un expert ici).

Je vous suggère de regarder de plus près à this et this puis de décider de ce qui doit être utilisé dans votre cas particulier.

[EDIT]

Vous pouvez essayer (devrait fonctionner dans tous les navigateurs):

white-space: -moz-pre-wrap; /* Firefox */ 
white-space: -pre-wrap; /* ancient Opera */ 
white-space: -o-pre-wrap; /* newer Opera */ 
white-space: pre-wrap; /* Chrome; W3C standard */ 
word-wrap: break-word; /* IE */ 

Je n'ai pas testé, mais je crois qu'il devrait faire l'affaire pour vous.

Answer 2

Je sais que c'est un très vieux problème, mais depuis que je viens de tomber dessus, je ressens le besoin de répondre.

Ma solution serait:

Utilisez white-space: pre-wrap; comme il est presque le même que white-space: pre;, juste ajoute linebreaks. (Référence: http://www.quirksmode.org/css/whitespace.html)

Alors je cibler spécifiquement vieux-à-dire soit avec des commentaires conditionnels (référence: http://www.quirksmode.org/css/condcom.html) ou avec hacks spécifiques du navigateur css (http://paulirish.com/2009/browser-specific-css-hacks/).

Un exemple pour la deuxième méthode:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* IE6 and below */ 
* html .introsub { white-space: pre } 

/* IE7 */ 
*:first-child+html .introsub { white-space: pre } 

Ce sera suffisant pour le forcer à envelopper.