Cubrir todo el div de texto con alto fijo

[vivi_]

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.

[Middrel]

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!

[vivi_]

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.

[pzin]

No sé si entendí, eres rarito explicando. Ponlo como elemento en linea:

Código CSS:

display: inline;
 

O si te entiendo de otra forma, justificando el texto:

Código CSS:

text-algin: justify;
 

[vivi_]

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

[pzin]

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?

[vivi_]

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

[pzin]

¿Y usando min-width no puedes lograr esa longitud mínima?

[vivi_]

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.. :(

[pzin]

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.

[vivi_]

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 :)

[Middrel]

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!

[pzin]

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:

span.titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 

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:

div.contenedor_imagen {
  position: relative;
}
span.titulo {
  position: absolute;
  bottom: 0;
}
 

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.

[vivi_]

Iniciado por Middrel

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

Iniciado por pzin

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:

span.titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 

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.. :/

[pzin]

Iniciado por pzin

Es decir, ¿si la última linea está justificada te vale?

Iniciado por vivi_

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.

Iniciado por vivi_

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.