salto de línea de fuerza en la celda de la tabla html

Estoy tratando de encontrar una manera de forzar el salto de línea en la celda de la tabla después de que el texto en su interior sea más largo que el 50% del tamaño máximo permitido.salto de línea de fuerza en la celda de la tabla html

¿Cómo puedo hacerlo sin ninguna función JS, usando solo HTML puro con CSS?

Fuente

2011-07-27 dantuch

@Phil es onebiglonglineoftext por lo que las ideas que figuran aquí deberían ser suficientes – dantuch

no funcionará si es una sola palabra (ver http://jsfiddle.net/NweWX/) – Fender

@Fender, gracias ... - funciona bien con algo así como '' – dantuch

Creo que lo que estamos tratando de hacer es palabras o direcciones URL de envoltura loooooooooooooong por lo que no empujan el tamaño de la mesa a cabo. (¡He estado intentando hacer lo mismo!)

Puede hacerlo fácilmente con un DIV dándole el estilo word-wrap: break-word (y es posible que también deba establecer su ancho).

div { 
    word-wrap: break-word;   /* All browsers since IE 5.5+ */ 
    overflow-wrap: break-word;  /* Renamed property in CSS3 draft spec */ 
    width: 100%; 
}

Sin embargo, para las tablas , debe envolver el contenido en un DIV (u otra etiqueta de bloque) o aplicar: table-layout: fixed. Esto significa que el ancho de las columnas ya no es fluido, sino que se define en función del ancho de las columnas en la primera fila solamente (o mediante anchuras especificadas). Read more here.

Código de ejemplo:

table { 
    table-layout: fixed; 
    width: 100%; 
} 

table td { 
    word-wrap: break-word;   /* All browsers since IE 5.5+ */ 
    overflow-wrap: break-word;  /* Renamed property in CSS3 draft spec */ 
}

la esperanza de que ayude a alguien.

Fuente

2013-11-26 00:19:25

Anidé una palabra larga dentro de una tabla anidada usando un div con lab-break-word. No requería table-layout: estilo fijo.Gracias por una solución que funciona en IE, Chrome y FF:) – davidjmcclelland

Hola David: sí, si tu contenido está * dentro de un DIV * (que está dentro de una tabla), entonces el primer fragmento es adecuado. –

gracias, cambiado aceptado en this1 – dantuch

le sugiero que utilice un div contenedor o párrafo:

<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td>

Y se puede hacer una clase fuera de él:

<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td> 

td.linebreak p { 
    width: 50%; 
}

Todo esto suponiendo que significaba el 50%, como en el 50 % de la celda

Fuente

2011-07-27 11:18:41 orlp

Ah, lo siento por la actualización tardía, pero como @Fender comentó, no ayuda, si quiero romper solo, tolonglineoftext. Y ese es el verdadero problema. – dantuch

¿Cómo centrar este texto? – zygimantus

Es difícil que lo hagan sin el HTML, pero en general se puede poner: