Navegador de palabras compatible con el navegador y espacio en blanco: ¿pre?

Question

Necesito texto dentro de un div para preservarlo y envolverlo. Hasta ahora estoy teniendo problemas para encontrar una solución. La mejor solución que he podido encontrar no funciona para todos los navegadores.

Lo siguiente funciona en Chrome e IE6 +, pero en Firefox el texto no se está ajustando.

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

me he dado cuenta que por cualquier razón el texto no se ajusta en Firefox con white-space: pre. Y -moz-pre-wrap no funciona en Firefox 3.5 (¿por qué?), Solo pre-wrap. PERO cuando agrego pre-wrap a la lista, IE 6 y 7 no funcionan. Muy frustrante.

El código:

.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

Las propiedades de CSS3 no siempre funcionan como nos gustaría que les permite trabajar :). Aún así, no veo ningún punto en la mezcla de white-space:pre y word-wrap:break-word.

El primero no ajustará el texto a menos que se encuentre una etiqueta <br />. El segundo hará lo contrario: romper las palabras cada vez que sea necesario, incluso en medio de una palabra. Ellos parecen estar en conflicto, y las respuestas más obvias de por qué diferentes navegadores reaccionan de manera diferente a estas propiedades es que

• apoyan cualquiera de las dos propiedades
• ya que están en conflicto, la prioridad no está definido o diferente en cada navegador

(no estoy seguro, no soy realmente un experto aquí).

Le sugiero que eche un vistazo más de cerca a this y this y luego decida qué se debe utilizar en su caso particular.

[EDIT]

Es posible que desee probar este (debería funcionar en todos los navegadores):

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

no he probado esto, pero creo que debe hacer el truco para usted.

Answer 2

Sé que este es un problema muy antiguo, pero como me acabo de encontrar, siento la necesidad de responder.

Mi solución sería:

Uso white-space: pre-wrap; ya que es casi lo mismo que white-space: pre;, sólo se suma saltos de línea. (Referencia: http://www.quirksmode.org/css/whitespace.html)

continuación, me gustaría apuntar específicamente de edad, es decir, ya sea con los comentarios condicionales (referencia: http://www.quirksmode.org/css/condcom.html) o con el navegador hacks CSS específicos (http://paulirish.com/2009/browser-specific-css-hacks/).

Un ejemplo para el segundo método:

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

Esto será suficiente para que la fuerza para envolver.