La palabra de ruptura de palabras no funciona en este ejemplo

No puedo hacer que las palabras coincidan para trabajar con este ejemplo …

   
ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap

Recordé haber leído que había que especificar un diseño (lo que hice), pero más allá de eso no estoy seguro de qué hacer para que esto funcione. Realmente me gustaría que esto funcione en Firefox. Gracias.

EDITAR: Falló en Chrome 19 y Firefox 12, funciona en IE8. Intenté doctype strict y transitional, ninguno funcionó.

Solución de Mozilla Firefox

Añadir:

 display: inline-block; 

al estilo de tu td .

Solución de navegadores basados ​​en Webkit ( Google Chrome , Safari , …)

Añadir:

 display: inline-block; word-break: break-word; 

al estilo de tu td .

Nota: Tenga en cuenta que, como por ahora, break-word no es parte de la especificación estándar para webkit; por lo tanto, puede que le interese emplear el break-all lugar. Este valor alternativo proporciona una solución indudablemente drástica; sin embargo, se ajusta al estándar.

Solución Opera

Añadir:

 display: inline-block; word-break: break-word; 

al estilo de tu td .

El párrafo anterior se aplica a Opera de manera similar.

Use este código que funcionará en todos los navegadores

 overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; 

Esta combinación de propiedades me fue útil:

 display: inline-block; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; line-break: strict; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; 

para que el break inteligente (break-word) funcionara bien en diferentes navegadores, lo que funcionó para mí fue el siguiente conjunto de reglas:

 #elm { word-break:break-word; /* webkit/blink browsers */ word-wrap:break-word; /* ie */ } -moz-document url-prefix() {/* catch ff */ #elm { word-break: break-all; /* in ff- with no break-word we'll settle for break-all */ } }