Ver Mensaje Individual
  #21 (permalink)  
Antiguo 19/08/2010, 10:37
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Respuesta: texto que sobrepasa div

No, de nada. Le sigo dando vueltas de molesto que soy, nomás. Aunque debo confesar que ese ejemplo que puse tiene el truco del float: left. Lo que debí hacer es meter otra celda más, porque resulta que las table data en realidad no flotan a la izquierda en el bloque table row, y si se acaba el espacio en el ancho de documento, se supone que una tabla lo supera y salta la scrollbar. Pero si ponemos a flotar las celdas resulta que se acomodan abajo. Así que no anda.

Lo estuve pensando un rato. Eso del pre tampoco estaría mal, pero resulta que es una caja para texto preformado. Y semanticamente no cabe para meter texto "común". Sí, ya sé, yo no soy el más indicado para quejarme; mientras un truco funcione lo uso contra las quejas de todos. Pero si se puede evitar, mejor; y si lo que va dentro de la celda es un párrafo muy largo que hay que ajustar hacia abajo, lo que podemos poner es justamente una etiqueta <p>.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>WRAPPING.</title>

<style type="text/css">

.principal{
border: 2px black solid;
background-color: silver;
width: 500px; /*EL ANCHO DEBE ESTAR DECLARADO*/
float: left;
margin: 0;

white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP */
word-wrap: break-word; /* IE 5+ */

}

</style>
</head>
<body>

<table style="margin-bottom: 20px; background: red; ">
<tbody style="background: green; ">
<tr style="background: blue; ">
<td>
<p class="principal">UNOggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p>
</td><td>
<p class="principal">DOSggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p>
</td><td>
<p class="principal">TREggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</p></td>
</tr>
</tbody>
</table>

<table style="background: red; ">
<tbody style="background: green; ">
<tr style="background: blue; ">
<td class="principal">
CUAggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwggggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwww.
</td>
</tr>
</tbody>
</table>

</body>
</html>
Igual hay que probar mucho antes de considerar el asunto como resuelto. A mi anteriormente se me dio por meter ejemplos para ver el contenido completo con algún desplazamiento más que nada porque sirven para desarmarlos y aprender —como digo siempre, a los que recién empiezan le son útiles—, pero ya no voy a seguir, está mejor volver al asunto original.

Y no te preocupes por el tiempo. En temas donde nos dedicamos a encontrar soluciones no puede haber fecha de vencimiento. A mí se me cae una idea por año, y ya tengo varios temas pendientes.
El asunto es que no venga nadie a postear cualquier cosa y lo arruine; pero mientras sea un aporte, nos van a tolerar.




(Creo...)