Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/02/2011, 10:13
PeterTheWall
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 13 años, 5 meses
Puntos: 0
Problemas con el overflow:hidden de un parrafo

Hola! Tengo un artículo en el que va un texto. Este texto lo escribe el usuario. Para evitar que este texto me desconfigure la estructura de la tabla que contiene este texto hago dos cosas:
La tabla que contiene el texto le digo que es de ancho fijo "table-layout:fixed;"
Al texto le aplico la propiedad "overflow:hidden;"

Ok, No hay problema. El tema es que, además, puede venir una imagen, la cual la floto a la derecha. Quedaría así:

aaaaa
aaaaa [IMAGEN]
aaaaa
aaaaaaaaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaaaaa

Es todo correcto siempre y cuando no tenga que actuar la propiedad "overflow:hidden". Me explico, esta propiedad la pongo a modo de seguro. Si alguen me pone un texto ( sin espacios ) tan largo que no cabe en una linea, me interesa que la corte al final de la tabla. Como esto es muy raro que pase, en general va bien. Pero, si realmnete alguien pone una "palabra" tan larga que no cabe en una linea, me hace esto:

aaaaa
aaaaa [IMAGEN]
aaaaa
aaaaa
aaaaa
aaaaa

Es decir, hace el overflow por que se encuentra la imagen ( que está dentro de una capa ). Pero, tan terminar la capa, el texto debería extenderse hasta el final de la tabla. Y continúa haciendo el overflow al nivel de la capa cpntenedora de la imagen. Os paso el código... En IE funciona bien, en el resto de navegadores no.

<html>
<head>
<style type="text/css">
.TablaFija { table-layout:fixed; }
</style>
<style type="text/css">
.css_texto0 {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-transform: normal;
color: #050505;
text-decoration: none;
letter-spacing: 1px;
overflow:hidden;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="687" class="TablaFija">
<tr>
<td width="687">
<div id="multimedia" style="width:110; height:110; float: right;">
<center>
<img src="http://2.bp.blogspot.com/_1xFx7ptCzY0/SEAw1H1bzlI/AAAAAAAADDY/ZpfeV9WrspI/s400/Bird_Magic.jpg" width="100" height="100"/>
</center>
</div>
<p class="css_texto0">sxsxssxsxssxsxssxsxssxsxssxsxss xsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxss xsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxssxsxss xsxssxsxsd</p>
<br>
<p class="css_texto0">sxsxs sxsxssxsx ssxsxss xsxssxsxs sxsxssxsxs sxsxss xsxs sxsxssxsx ssxsx ssxs xssxsxs sxsxssxs xssx sxssxsxssx s xssxsxs sxsxss xsxs sxs xssxs xssxs x ssxs xssxs xsd sxsxs sxsxssxsx ssxsxss xsxssxsxs sxsxssxsxs sxsxss xsxs sxsxssxsx ssxsx ssxs xssxsxs sxsxssxs xssx sxssxsxssx s xssxsxs sxsxss xsxs sxs xssxs xssxs x ssxs xssxs xsdsxsxs sxsxssxsx ssxsxss xsxssxsxs sxsxssxsxs sxsxss xsxs sxsxssxsx ssxsx ssxs xssxsxs sxsxssxs xssx sxssxsxssx s xssxsxs sxsxss xsxs sxs xssxs xssxs x ssxs xssxs xsd</p>
</td>
</tr>
</table>
</body>
</html>

Gracias por la ayuda.