titulos - truncar texto css
Cómo envolver el texto con CSS? (5)
Esta pregunta ya tiene una respuesta aquí:
<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
¿Cómo obtengo un texto como este para envolverlo en CSS?
Con el text-wrap , el soporte del navegador es relativamente débil (como es de esperar de un borrador de especificación).
Es mejor que tome medidas para garantizar que los datos no tengan cadenas largas de espacio no blanco.
Esto funcionará en todas partes.
<BODY>
<TABLE style="table-layout:fixed;">
<TR>
<TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD>
</TR>
</TABLE>
</BODY>
Intenta hacer esto. Funciona para IE8, FF3.6, Chrome
<body>
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
</tr>
</table>
</body>
La mejor opción si no puede controlar la entrada del usuario, es establecer la propiedad css, overflow: hidden , por lo que si la cadena es superior al ancho, no deformará el diseño.
Editado:
Me gusta la respuesta: "word-wrap: break-word", y para aquellos navegadores que no lo admiten, por ejemplo, IE6 o IE7, usaría mi solución.
Si escribe "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG", obtendrá:
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
Tomé mi ejemplo de un par de sitios web diferentes en google. He probado esto en ff 5.0, IE 8.0 y Chrome 10. Funciona en todos ellos.
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
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+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword"></td>
</tr>
</table>