css - altura mínima por número de líneas

Creo que ya sé la respuesta a esta, pero espero que alguien tenga un buen truco para eso.css - altura mínima por número de líneas

Quiero especificar una altura mínima de un DIV, pero no un px /%. (Sé que suena extraño, pero es por razones de compatibilidad/capacidad de respuesta)

Básicamente quiero poder especificarlo por número de líneas.

Tengo una grilla de DIVS, pero los elementos en el interior no son fijos, por lo que un elemento puede tener 3 líneas, y el siguiente solo 2 o 1 línea. esto arruina el diseño.

Básicamente, lo que necesito es la siguiente:

=====================  =====================  ===================== 
    Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
    amet, consectetur   amet, consectetur   amet, consectetur 
    adipiscing elit. 
    =====================  =====================  ===================== 

    =====================  =====================  ===================== 
    Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
    amet, consectetur   amet, consectetur 
           adipiscing elit. 
    =====================  =====================  =====================

y no esto:

=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   amet, consectetur 
adipiscing elit.   =====================  ===================== 
===================== 
          =====================  ===================== 
=====================  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
Lorem ipsum dolor sit  amet, consectetur   ===================== 
amet, consectetur   ===================== 
adipiscing elit.    
=====================

puede este tipo de cosas se puede lograr mediante especificado "Quiero 3 líneas"? (A diferencia de píxeles, porcentaje/em ??)

Editar I

Después comentarios -

Lo que realmente quiero es algo así como los elementos del formulario, insertados o área de texto donde se puede simplemente ¡especifique la altura y el ancho por líneas/caracteres!

<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>

Es difícil o creen que nadie ha inventado una solución de este tipo y nos dejó a todos a luchar con PX/EM /% cálculos y los gustos ..

Fuente

2012-06-22 Obmerk Kronen

Debe utilizar un clearfix hack

Te permitirá alinear tus div sin especificar ninguna altura. Es como un separador de línea:

=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   amet, consectetur 
adipiscing elit.   =====================  ===================== 
=====================  
{clearfix} 
=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   ===================== 
=====================  adipiscing elit. 
          =====================

todavía se puede establecer la altura/margen en cada div, por supuesto:

EDIT:

Para un tamaño igual interno, sin usar tablas, tienes varias soluciones:

Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.

Using display-table attribute (Method 1)

Or using javascript (Method 3)

Fuente

2012-06-22 07:23:02 zessx

sí, los divs estarán alineados como para el espacio entre ellos, pero no su propio tamaño .. –

Pero no hay un solo problema para establecer su propio tamaño, eso es solo una regla de CSS. Tu problema era para el tamaño del contenedor, ¿verdad? – zessx

no - el problema era su tamaño INTERNO. –

No sé por qué le gustaría that..but se podía fijar la altura y la anchura de la clase div acuerdo con el tamaño de la fuente que está a usar. dice que el tamaño de su fuente es 10px y va a usar 10 px de relleno y luego usar divs con 50px de altura ... luego agregue un margin-bottom a esos divs y ¡está listo, creo!

Fuente

2012-06-22 07:24:48

gracias, tuve esta solución antes, pero como dije, estoy intentando ver si se puede hacer SIN especificar y tamaños de px ... también, agregando un margen inferior, se agregará también a las inmersiones completas, no solo a las vacías ... –

No creo que si es posible agregar alto y ancho a los divs de esa manera. como lo hacemos con textarea. Espero que algún hack esté allí. Necesito averiguarlo –

Exactamente mi pregunta aquí: ¡encuentre un truco para especificar una altura de línea como con el área de entrada! (y tal vez alguien debería sugerirlo al equipo de desarrollo de css3 :-)) –

¿Por qué te opones a la idea de establecer min-height en ems? Si tiene line-height en ems, multiplique eso por tres y obtendrá la altura deseada.

div { 
    line-height:1.5em; 
    min-height:4.5em; 
    float:left; 
    width:33%;/*close enough*/ 
}

Fiddled

Actualización: el establecimiento min-height a tres líneas es un ejercicio inútil - que no tiene en cuenta escenarios en los que el contenido no se encajar en el espacio disponible. Puede usar faux columns para que el contenido parezca tener una altura uniforme dentro de la fila

Fuente

2012-06-22 07:59:18

Gracias por su respuesta: ilustra el problema exactamente. importa cambiar el tamaño del panel de salida en el violín? :-) –

Estaba asumiendo un diseño de ancho fijo. De todos modos, ¿qué piensas hacer cuando el contenido * no * se ajusta en tres líneas? Si no le importa (y no especificó el comportamiento para este escenario), simplemente haga min-height en height y configure overflow en hidden.Mientras tanto, actualizaré mi respuesta para usar las columnas falsas –

@ObmerkKronen: para aclarar mi comentario anterior, estás diciendo en la pregunta * un elemento puede tener 3 líneas, y el siguiente solo 2 o 1 línea * lo que implica usted tiene el control del ancho del contenedor y puede garantizar que el contenido nunca exceda las 3 líneas. Cuando cambia el tamaño de la vista previa jsfiddle para que sea más estrecha, ya no está cumpliendo esa garantía –

Lo logré usando flexbox y min-height.

que cada uno de sus div elementos dentro de un recipiente flexbox para conseguir que tienen la misma altura y reaccionan en respuesta (es decir, los puntos de interrupción de uso, FlexBox wrap, y min-width para asegurar que la probabilidad de tener más de 3 líneas de texto es baja) Luego, para cada uno de sus elementos internos, configure los valores min-height y line-height, como @ o.v. sugirió. min-height debe ser igual a font-size * line-height multiplicador.

Necesitaba que los párrafos internos tuvieran al menos 2 líneas de alto (hay una alta probabilidad de que contengan 1 o 2 líneas de texto, con una probabilidad muy baja de que contengan más de 2 líneas de texto), así que esto es lo que terminó con:

HTML

<div class="flex-container"> 
    <div> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    </div> 
    <div> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    </div> 
</div>

CSS

div.flex-container { 
    display: flex; 
} 
div.flex-container p { 
    font-size: 1em; 
    line-height: 1.125; // Default is 1.2, but varies by browser 
    min-height: 2.25em; // 2 * 1em * 1.125 
         // (number of lines) * (font-size) * (line-height multiplier) 
}

Fuente

2016-08-15 22:05:50 dignoe

css - altura mínima por número de líneas

Respuesta

Cuestiones relacionadas