Wrap e spazi vuoti compatibili con il browser: pre?

Question

Ho bisogno di testo all'interno di un div da conservare e da avvolgere. Finora ho difficoltà a trovare una soluzione. La soluzione migliore che sono riuscito a trovare non funziona per tutti i browser.

I seguenti lavori in Chrome e IE6 +, ma in Firefox il testo non è a capo.

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

ho trovato che per qualsiasi motivo il testo non va a capo in Firefox con white-space: pre. E -moz-pre-wrap non funziona in Firefox 3.5 (perché ??), solo pre-wrap. MA quando aggiungo pre-wrap alla lista, IE 6 e 7 non funzionano. Molto frustrante.

Il codice:

.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

Le proprietà CSS3 non funzionano sempre come vorremmo loro di lavorare :). Tuttavia, non vedo un punto nel mixare white-space:pre e word-wrap:break-word.

Il primo non avvolgerà il testo se non si incontra un tag <br />. Il secondo farà il contrario: spezza le parole ogni volta che è necessario, anche nel mezzo di una parola. Essi sembrano essere in conflitto, e le risposte più ovvie per il motivo per cui diversi browser reagiscono in modo diverso a queste proprietà è che

• sostengono una delle due proprietà
• dal momento che sono in conflitto, la precedenza è indefinito o diverso in ogni browser

(Non posso essere sicuro, però, non sono davvero un esperto qui).

Vi suggerisco di dare un'occhiata più da vicino a this e this e quindi decidere su cosa dovrebbe essere usato nel vostro caso particolare.

[EDIT]

Si potrebbe desiderare di provare questo (dovrebbe funzionare in tutti i browser):

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 */ 

non ho ancora testato questo, ma credo che dovrebbe fare il trucco per voi.

Answer 2

So che questo è un problema molto vecchio, ma poiché mi sono imbattuto in esso, sento l'impulso di rispondere.

mia soluzione sarebbe:

Usa white-space: pre-wrap; in quanto è quasi la stessa di white-space: pre;, aggiunge solo le interruzioni di linea. (Riferimento: http://www.quirksmode.org/css/whitespace.html)

Poi vorrei rivolgono specificamente vecchio cioè sia con i commenti condizionali (Riferimento: http://www.quirksmode.org/css/condcom.html) o tramite browser specifici hack CSS (http://paulirish.com/2009/browser-specific-css-hacks/).

Un esempio per il secondo metodo:

.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 } 

questo sarà sufficiente per forzarlo per avvolgere.