Forzar párrafo para usar la altura máxima disponible

Tengo una serie de divs que contienen un pequeño párrafo de texto. Me gustaría hacer todos los divs de la misma altura y variar el ancho según sea necesario para ajustar el párrafo.

Si tuviera que hacer esto en la dirección vertical, simplemente establecería el ancho del div. Pero si configuro la altura, el párrafo se convierte en una línea que hace que la caja sea lo más ancha posible.

Cómo forzar al párrafo a tener tantas líneas como permita la altura y luego boost el ancho según sea necesario

He intentado usar min-height:100px para los párrafos, pero la altura restante está llena de espacios en blanco y el texto sigue en una línea.

Aquí hay un ejemplo de lo que bash hacer. Como puede ver, el texto se queda en una línea. Me gustaría hacerlo archivar la caja verticalmente antes de hacer la caja más ancha.

jsfiddle link: http://jsfiddle.net/Kj49B/

      
  • Title 1

    A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul

  • A long title

    Watch the latest news summary from BBC World News. International news updated 24 hours a day

  • A much much longer title

    Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff

  • A long title that goes on and on until it is very very long

    Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country

Aquí está el CSS que lo acompaña:

 body { font-family:sans-serif; } .container { width:95%; margin-left:auto; margin-right:auto; align:center; } .item { margin-left:auto; margin-right:auto; display:inline-block; color:#000033; font-size:14px; height:180px; line-style:none; float:left; margin:20px; padding:20px; vertical-align:middle; border:1px solid #000033; border-radius: 50px; /*w3c border radius*/ -webkit-border-radius: 50px; /* webkit border radius */ -moz-border-radius: 50px; /* mozilla border radius */ } .title { color:#000033; text-decoration:none; font-size:22px; margin:0px; padding:0px line-height:1; } img { height:90px; margin: 5px; } p { display:block; margin:5px; width:minimum; padding:0px; min-height:80px; line-height:1.2; word-wrap:true; } 

No puedes usar CSS. No hay nada que haya encontrado incluso en CSS3 que lo soporte de forma nativa. Lo que está pidiendo es ese width:auto actúe como height:auto pero no lo hará porque la altura automática se basa en el concepto de recuadros de líneas y no existe un “cuadro de columna” (porque el texto no está una grilla).

Las tablas con celdas de altura fija son lo más cercano que obtendrás pero dices en el comentario anterior que no te convienen por otras razones. Incluso entonces verá que el comportamiento no es particularmente consistente o fácil de controlar.

Puede hacer esto usando javascript detectando cuadros que exceden una cierta altura y luego ampliándolos progresivamente hasta que no lo hagan. Si javascript no es una opción tampoco, entonces creo que no tienes opciones.

Hola, solo tienes que dar ancho y alto automático en tu CSS que funcionará bien de acuerdo a tus requerimientos.

vea su css actualizado: –

 body { font-family:sans-serif; } .container { width:auto; margin-left:auto; margin-right:auto; align:center; } .item { margin-left:auto; margin-right:auto; display:inline-block; color:#000033; font-size:14px; line-style:none; float:left; margin:20px; padding:20px; height:auto; vertical-align:middle; border:1px solid #000033; border-radius: 50px; /*w3c border radius*/ -webkit-border-radius: 50px; /* webkit border radius */ -moz-border-radius: 50px; /* mozilla border radius */ } .title { color:#000033; text-decoration:none; font-size:22px; margin:0px; padding:0px line-height:1; } img { height:90px; margin: 5px; } p { display:block; margin:5px; width:minimum; padding:0px; line-height:1.2; word-wrap:true; height:auto; } 

O vea el violín: – http://jsfiddle.net/Kj49B/7/

Deberías tener esto:

 div {max-height:100px;} p {height:100%;} 

Deje el ancho no especificado. Por supuesto, podría reemplazar fácilmente div y p con ids o clases si así lo desea.

Mi respuesta puede no ser válida ya que vi su muestra de código después de publicar esta respuesta. Dejaré esto aquí en caso de que pueda ser de alguna ayuda.