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

Question

he utilizado:

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; Tratar de resolver un arreglo/corrección de CSS resultó ser demasiado frustrante y lento.

Answer 1

Establezca un ancho de columna para la etiqueta td.

Answer 2

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

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

Answer 3

Una forma un poco hackish de hacer esto es procesar el texto para agregar espacio entre cada letra. Reemplace espacios con   Luego use el atributo css espaciado de letras para reducir los espacios.

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

Answer 4

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

Answer 5

Creo que este es un problema de larga data en Firefox, que se remonta a Mozilla y Netscape. Apuesto a que tenías 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 hacks feos.

Tiene sentido cambiar el diseño.

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

Answer 6

Prueba de esto, creo que esto funcionará para algo así como "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" producirá

AARRRRRRRRRRRRRRRRRRRR 
RRGGGGGGGGGGGGGGGGGGGG 
G 

he tomado mi ejemplo de un par de diferentes sitios web 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;  /* css-3 */ 
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> 

Answer 7

Para un diseño de tabla automática tratar de estilo de la td preocupa la combinación de los atributos max-anchura y palabra-wrap.

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

probado en Firefox 32, Chrome 37 y EI11.

Answer 8

estoy usando angular para mi proyecto, y logró resolver esto con un simple filtro:

Plantilla:

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

Filtro:

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

---

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

Answer 9

Aquí está la versión avanzada de lo que OP pidió.

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

Como

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB 

descanso para

AAAAAAAAAAAAAAAAAAAAAAA- 
BBBBBBBBB 

lo tanto, no es nueva propiedad CSS si es compatible, por lo general con el apoyo de 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.