titulos - truncar texto css varias lineas




Cómo envolver el texto con CSS? (4)

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.

Esta pregunta ya tiene una respuesta aquí:

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

¿Cómo obtengo un texto como este para envolverlo en CSS?


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>

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>






textwrapping