Foros del Web » Creando para Internet » CSS »

Cubrir todo el div de texto con alto fijo

Estas en el tema de Cubrir todo el div de texto con alto fijo en el foro de CSS en Foros del Web. Tengo un div con una altura fija y anchura variable según el texto, y me gustaría que ésta varíe para que el texto pueda cubrir ...
  #1 (permalink)  
Antiguo 08/04/2013, 11:45
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Cubrir todo el div de texto con alto fijo

Tengo un div con una altura fija y anchura variable según el texto, y me gustaría que ésta varíe para que el texto pueda cubrir todo el div y no queden espacios. Pongo una imagen a modo de ejemplo:



En vez de:



¿Alguna sugerencia?
Saludos.

Última edición por vivi_; 08/04/2013 a las 11:52
  #2 (permalink)  
Antiguo 08/04/2013, 11:53
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 827
Antigüedad: 16 años, 1 mes
Puntos: 25
Respuesta: Cubrir todo el div de texto con alto fijo

No entendí bien, pero podrías usar "auto" en width y en height para que el div siempre crezca de acuerdo al texto, y aún más podrías usar un max-height y un max-width por si requieres que el div no crezca más de "x" tamaño.

Por si a eso te refieres, creo que es lo que entendí.

Saludos!
  #3 (permalink)  
Antiguo 08/04/2013, 11:59
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

No es eso exactamente, creo que con las imágenes se entiende mejor. Necesito que el ancho sea automático de tal forma que sea de un tamaño el cual permita que la siguiente línea de texto llegue hasta el final y no queden espacios en blanco, osea que la primera y segunda línea tengan la misma longuitud.
  #4 (permalink)  
Antiguo 08/04/2013, 13:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

No sé si entendí, eres rarito explicando. Ponlo como elemento en linea:
Código CSS:
Ver original
  1. display: inline;

O si te entiendo de otra forma, justificando el texto:
Código CSS:
Ver original
  1. text-algin: justify;
  #5 (permalink)  
Antiguo 08/04/2013, 14:34
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

Era difícil de explicar, por eso he echo las imágenes pero ya veo que tampoco ayudan :(
Básicamente lo que quería es que todas las líneas de texto quedaran de igual longitud ya que no sé la cantidad de texto que va a tener el div

texto texto texto texto texto
texto texto texto texto texto <----- así

texto texto texto texto texto texto texto
texto texto <----- ¡así no!

Con justify la última línea no queda igual que las otras, no se si lo que busco es posible...
  #6 (permalink)  
Antiguo 08/04/2013, 14:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

Hombre, podrías justificar la última linea haciendo una pirulilla, añadiendo un pseudo-elemento, hasta que esto sea funcional. Pero, ¿eso te valdría? Es decir, ¿si la última linea está justificada te vale?
  #7 (permalink)  
Antiguo 08/04/2013, 14:47
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

En principio no porque necesito que el ancho del div tenga el mínimo tamaño para que todas las líneas o filas del texto queden de igual longitud. No se si se entiende lo que quiero conseguir pero no encuentro otra forma de expresarlo
  #8 (permalink)  
Antiguo 08/04/2013, 15:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

¿Y usando min-width no puedes lograr esa longitud mínima?
  #9 (permalink)  
Antiguo 08/04/2013, 15:15
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

No porque esa longitud tiene que ser automática. Si uso min-width cuando supere el tamaño (porque el texto es variable) las líneas no van a quedar igual de largas.
Me parece que lo que yo quiero no se puede conseguir de una manera simple.. :(
  #10 (permalink)  
Antiguo 08/04/2013, 16:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

Es que desde la lógica está mal planteado lo que quieres hacer. ¿Ancho automático pero basado en el texto y que además sea iguales entre elementos independientes entre si?

Posible es, al final todo se puede, pero no es CSS. Tendrías que usar JavaScript para ir calculando las medidas y demás.

Igual si explicas la aplicación práctica de todo esto se podría guiarte en otra dirección, porque a veces nos obcecamos en algunas ideas sin contemplar otras soluciones que luego son fáciles de aplicar.
  #11 (permalink)  
Antiguo 08/04/2013, 16:28
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

Es para escribir texto encima de una imagen a modo de título (tipo máscara de vídeo) y que quedase centrado, porque si no no quedaba muy estético una línea mucho mas larga que la otra. Voy a probar calculando las longitudes con php porque no encuentro otra solución gracias de todas formas :)
  #12 (permalink)  
Antiguo 08/04/2013, 17:02
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 827
Antigüedad: 16 años, 1 mes
Puntos: 25
Respuesta: Cubrir todo el div de texto con alto fijo

Creo que ya entendí lo que buscas lograr... pero siento que te vas a complicar :/

Con javascript o PHP, lo podrías hacer, sin embargo, ¿qué sucede si en la última línea te queda una palabra de tres o cuatro caracteres?

Por ejemplo:

Hola a todos como
han estado espero
que muy bien. Nos
vemos.

Si ves en la primera le di un espacio para que quede a la par de las dos líneas siguientes, pero la última se tendría que espaciar entre caracteres para poder rellenar el espacio. Aún con justificado, se vería muy mal.

Con javascript lo podrías lograr pero estéticamente no se vería bien y no creo que el resultado final sea el que buscas.

Saludos!
  #13 (permalink)  
Antiguo 08/04/2013, 17:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

Bueno, ahora ya el Dios Posibilidad te abre la mano.

Si quieres trabajar con una linea sola, puedes usar un compendio cada vez más usado:

Código CSS:
Ver original
  1. span.titulo {
  2.   overflow: hidden;
  3.   text-overflow: ellipsis;
  4.   white-space: nowrap;
  5. }

Esto lo que hace es que tu texto no tenga saltos de linea —nowrap—, el texto que se sobrepase se oculta —overflow— y en caso de haber texto oculto añade tres puntos (...) puntos suspensivos (…) al texto —text-overflow— dando a entender al usuario que el título es más de lo que aparece.

La segunda opción, es mostrar todo el título pero siempre alineado abajo:

Código CSS:
Ver original
  1. div.contenedor_imagen {
  2.   position: relative;
  3. }
  4. span.titulo {
  5.   position: absolute;
  6.   bottom: 0;
  7. }

El text-overflow: ellipsis funciona sólo para texto de una sola linea. Pero hay un plugin para jQuery que lo hace posible para varias lineas. No lo he probado.

Luego también puedes no mostrar el título si no sólo al pasar por encima con :hover, o usar la primera opción con los puntos suspensivos y luego al pasar por encima mostrar el título completo, etc.
  #14 (permalink)  
Antiguo 09/04/2013, 15:12
 
Fecha de Ingreso: julio-2007
Mensajes: 102
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Cubrir todo el div de texto con alto fijo

Cita:
Iniciado por Middrel Ver Mensaje
Creo que ya entendí lo que buscas lograr... pero siento que te vas a complicar :/

Con javascript o PHP, lo podrías hacer, sin embargo, ¿qué sucede si en la última línea te queda una palabra de tres o cuatro caracteres?

Por ejemplo:

Hola a todos como
han estado espero
que muy bien. Nos
vemos.

Saludos!
Sí, a eso me refería Middrel. El caso es que puedes encontrar un tamaño del div que contiene al texto en el que todas las líneas te van a quedar de la misma longitud, eso es lo que intentaba preguntaros si había alguna forma sencilla que se ajustase automáticamente a ese tamaño pero me parece que va ser que no..

Cita:
Iniciado por pzin Ver Mensaje
Bueno, ahora ya el Dios Posibilidad te abre la mano.

Si quieres trabajar con una linea sola, puedes usar un compendio cada vez más usado:

Código CSS:
Ver original
  1. span.titulo {
  2.   overflow: hidden;
  3.   text-overflow: ellipsis;
  4.   white-space: nowrap;
  5. }

Esto lo que hace es que tu texto no tenga saltos de linea —nowrap—, el texto que se sobrepase se oculta —overflow— y en caso ...
El problema es que al ser títulos de vídeos no me interesa que se oculte el texto ni que se incluyan los puntos suspensivos ya que no es excesivamente largo y todo el contenido es importante. El texto ya lo tengo posicionado de manera "absoluta" como tu mencionas, el problema era buscar una solución para que el texto no se saliera de la imagen (osea mediante varias líneas) y que además quedaran centradas, algo así como dos o tres líneas justificadas con la última línea incluida.. :/
  #15 (permalink)  
Antiguo 09/04/2013, 16:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 18 años, 10 meses
Puntos: 2113
Respuesta: Cubrir todo el div de texto con alto fijo

Cita:
Iniciado por pzin Ver Mensaje
Es decir, ¿si la última linea está justificada te vale?
Cita:
Iniciado por vivi_ Ver Mensaje
En principio no porque necesito que el ancho del div tenga el mínimo tamaño para que todas las líneas o filas del texto queden de igual longitud.
Cita:
Iniciado por vivi_ Ver Mensaje
algo así como dos o tres líneas justificadas con la última línea incluida.. :/


Estoy empezando a sospechar que el entendimiento por mi parte va a menos.

¿No tienes un ejemplo online de lo que estás haciendo? Y así nos dices "pues esto de aquí así y asá". A veces ayuda más eso que explicaciones largas.

Etiquetas: alto, cubrir, fijo, todo
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 00:14.