¿Cómo envuelvo texto sin espacios en blanco dentro de un <td>?

He usado:

word-break:break-all;
table-layout:fixed;

y el texto se ajusta en Chrome pero no en Firefox.

Actualización: decidí cambiar el diseño para que no necesitara la envoltura; intentar solucionar una corrección / pirateo de CSS estaba resultando demasiado frustrante y lento.

Prueba esto, creo que esto funcionará para algo como "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGG" producirá

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

He tomado mi ejemplo de un par de sitios web diferentes en Google. He probado esto en ff 5.0, IE 8.0 y Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Utilice CSS3 word-wrap: break-word;. También funciona en navegadores basados ​​en WebKit (Safari, Chrome).

Actualización : Olvidé, el elemento en cuestión debe, sin embargo, estar implícita o explícitamente posicionado como elemento fijo o mostrarse como elemento de bloque. Para las celdas de la tabla ( td), use display: inline-block;.

Aquí hay una versión avanzada de lo que pidió OP.

A veces, lo que sucede es que nuestro cliente quiere que demos '-' después del salto de palabra hasta el final de la línea.

Me gusta

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

romper a

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Por lo tanto, hay una nueva propiedad CSS si es compatible, generalmente compatible con los navegadores más recientes.

.dont-break-out {

  /* These are technically the same, but use both */
  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;

}

Estoy usando este.

Espero que alguien tenga una demanda como esta.

Para un diseño de tabla automático, intente diseñar el td en cuestión combinando los atributos max-width y word-wrap.

P.ej: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Probado en Firefox 32, Chrome 37 e IE11.

Puede inyectar manualmente espacios de ancho cero (& # 8203;) para crear puntos de ruptura.

Establezca un ancho de columna para la tdetiqueta.

Creo que este es un problema de larga data en Firefox, que se remonta a Mozilla y Netscape. Apuesto a que estaba teniendo problemas con la visualización de URL largas. Creo que es un problema con el motor de renderizado en lugar de algo que se puede solucionar con CSS, sin algunos trucos desagradables.

Tiene sentido cambiar el diseño.

Sin embargo, esto parecía esperanzador: http://hacks.mozilla.org/2009/06/word-wrap/

Estoy usando Angular para mi proyecto y logré resolver esto con un filtro simple:

Modelo:

<td>{{string | wordBreak}}</td>

Filtrar:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

No puede verlo, pero después $1hay un espacio invisible (gracias @kingjeffrey por la sugerencia), que habilitó los saltos de palabras para las celdas de la tabla.

Una forma ligeramente pirateada de hacer esto es procesando el texto para agregar espacio entre cada letra. Reemplace los espacios con  Luego use el atributo css de espaciado de letras para reducir los espacios.

Lo sé, es un truco ... pero si NADA más funciona, debería ajustarse sin problemas.