¿Cómo ajustar el texto con CSS?

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

¿Cómo obtengo un texto como este para envolver en CSS?¿Cómo ajustar el texto con CSS?

Fuente

2010-10-16 keruilin

No CSS, por lo tanto, no una respuesta, pero usando un campo de texto para mantenerlo ... simplemente diciendo –

Eugh. Las entradas están ahí para mostrar la entrada. Pensé que habíamos logrado ir más allá de mentir acerca de la semántica con fines de presentación. – Quentin

Intente 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>

Fuente

2010-10-16 18:36:13

Esto no funcionaba para mí, pero la respuesta de @Stirling a continuación funcionó. – Zarepheth

lo probé myslef y funciona muy bien! supongo que el único "problema" aquí es que debe establecer manualmente el tamaño del contenedor (100px en este ejemplo) – ymz

Esto también funciona: .truncate { ancho: 250px; espacio en blanco: nowrap; desbordamiento: oculto; desbordamiento de texto: elipsis; } –

Con text-wrap, la compatibilidad del navegador es relativamente débil (como se podría esperar de una especificación de borrador).

Le conviene tomar medidas para asegurarse de que los datos no tengan largas cadenas de espacio no en blanco.

Fuente

2010-10-16 16:41:01 Quentin

"Para evitar algunos errores de visualización, no ingrese palabras largas". ¿Esa es realmente tu respuesta? – SandRock

@SandRock - No, no lo es. Esa es una caracterización errónea de * la mitad * de esta respuesta. Los datos en la pregunta, aunque son una "larga cadena de espacio no blanco", no eran una "palabra". "tomar medidas" tampoco significa "no ingresar", no sabemos de dónde provienen los datos, podría significar probar la información del usuario para la cordura y mostrar un mensaje de error para contenido inapropiado. – Quentin

La mejor opción si no puede controlar la entrada del usuario, es establecer la propiedad css, overflow: ocultos, por lo que si la cadena es superior al ancho, no deformará el diseño.

Editado:

me gusta la respuesta: "word-wrap: break-palabra", y para los navegadores que no soportan, por ejemplo, IE6 o IE7, me gustaría utilizar mi solución.

Fuente

2010-10-16 16:43:08 netadictos

Si va a utilizar esta opción, asegúrese de establecer un ancho para el elemento que contiene el texto o el desbordamiento: oculto simplemente ocultará el desbordamiento, no lo ajustará. – jay

Si escribe "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" esto 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. 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>

Fuente

2011-02-24 17:43:00 Stirling

Agregué "word-wrap: break-word;" pero no funcionó ni en Firefox ni en IE (solo probé en estos dos) ... n cuando agregué todas las opciones que sugirió ... funcionó ... ¡¡¡Gracias !!! – UID

Tuve que agregar "espacio en blanco: -webkit-pre-wrap;" para obtener nuevas versiones de Chrome (y probablemente Safari) para que funcionen. – George

gracias, funcionó! bootstrap estaba haciendo algo por sí mismo, y nada ayudó. Finalmente la solución correcta para mí. –

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>

Fuente

2014-07-15 05:28:09

No muchas personas capitalizan elementos como ese nunca más, amigo. –

Respuesta

Cuestiones relacionadas