Foros del Web » Creando para Internet » CSS »

Problemas con el overflow:hidden de un parrafo

Estas en el tema de Problemas con el overflow:hidden de un parrafo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/02/2011, 10:13
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 7 años
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.
  #2 (permalink)  
Antiguo 09/02/2011, 11:08
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problemas con el overflow:hidden de un parrafo

Código cita:
Ver original
  1. 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.
Es tu opinión. Yo no veo un comportamiento fuera de lo que cabría esperar. Precisamente por tener el comportamiento overflow:hidden el párrafo se corta en el límite del mismo en lugar de prolongarse. Como tienes un elemento flotando a la derecha, el párrafo no puede extenderse más allá de los límites de éste en un flujo normal.
El siguiente párrafo por debajo de la imgen sí ocupará la totalidad del ancho al no tropezar con el div que contiene la imagen.
Yo incluiría la imagen dentro del párrafo, dándole a ella la propiedad float:right. De todos modos no hay muchas posibilidades distintas de cortar la línea en CSS2.1 cuando el texto tiene un ancho mayor que el párrafo por no contener espacios.
Controlar el texto al 100% obliga a utilizar javascript u otro lenguaje de programación. Parece que esto va a cambiar dentro de poco.
  #3 (permalink)  
Antiguo 09/02/2011, 11:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 7 años
Puntos: 0
Respuesta: Problemas con el overflow:hidden de un parrafo

Gracias por la respuesta. Sí, el problema lo tenía justo ahí. Cuando termina lo que es la imagen, lo que interesa es que vuelva a escribir todo el ancho de la tabla. Y no lo hace. Ok, poniéndolo todo en el párrafo, va bien. Sólo hay un pequeño problema... Ahora el texto se pega demasiado a lo que es la imagen. Por eso lo ponía en un DIV independiente. A este DIV le daba un poco más de ancho/alto y así el texto no se enganchaba a la imagen... Sabes si hay alguna propiedad del estilo "cellspacing" o "cellpadding" pero para imágenes?? Así dejará un espacio antes de mostrar la imagen y quedará más limpio.

gracias!!!
  #4 (permalink)  
Antiguo 09/02/2011, 11:55
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problemas con el overflow:hidden de un parrafo

Utiliza un margen en la imagen. margin-left: 15px; margin-bottom:15px; ...
Usa los valores que más te gusten.
  #5 (permalink)  
Antiguo 09/02/2011, 11:58
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 7 años
Puntos: 0
Respuesta: Problemas con el overflow:hidden de un parrafo

Ok! Solucionado lo de darle borde a la imagen. le doy un borde de 5px y al borde le doy el color blanco...
  #6 (permalink)  
Antiguo 09/02/2011, 12:13
 
Fecha de Ingreso: noviembre-2010
Mensajes: 65
Antigüedad: 7 años
Puntos: 0
Respuesta: Problemas con el overflow:hidden de un parrafo

Vaya... Ahora recuerdo por que no podía poner el "float" en la imagen... no sólo pueden haber imágenes. También pueden haber videos. Y manipular una imagen no hay problemas ( se busca el tag <img> y lo puedes montar ). Pero un vídeo, ya no es tanfácil. Por eso me interesaba usar el div. Y colocar en él la imagen o el vídeo. Y flotar el div ( no el objeto ). Pero, si hago eso, me da el problema que te comentaba... pppppffffff!!!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:45.