css - min height by number of lines

Question

I think I already know the answer to this one, but i hope maybe someone will have a some neat trick for that .

I want to specify a min-height of a DIV , but not px / % based . (I know it sounds strange , but it is for compatibility reasons / responsiveness)

Basically I want to be able to specify it by number of lines .

I have a grid of DIVS , but the elements inside are not fixed, so one element can have 3 lines, and the next one only 2 or 1 line . this messes up the layout .

Basically , what I need is THIS :

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

and NOT this :

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

can this sort of thing can be achieved by specified "I want 3 lines" ? (As opposed to pixels, percentage / em ??)

Edit I

After comments -

What I really want is something like the FORM elements , INPUT or TEXTAREA where you can simply specify the height and width by lines / characters !

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

It is hard o believe that no one has invented such a solution and left us all to struggle with PX / em / % calculations and the likes ..

Foti

Answer 1

You should use a clearfix hack

It will allow you to get your divs aligned without specifying any height. It's like a line separator :

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

You still can set height / margin on each div, of course :

EDIT :

For an internal equal size without using tables, you've got several solutions :

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)

Multilingual

yes, the divs will be aligned as for the space between them, but not their OWN size .. – Foti

But there's not a single problem to set their own size, that's just a CSS rule. Your problem was for the container size, right ? – Multilingual

Ow ok, I missed it. Then I a table is a good option, their width will be adjusted automatically. See my EDIT for another solution. – Multilingual

+1 for the efforts :-) but those solutions will not work for me . I can not detail my whole markup here , but the problem is actually inside another div , which is nested after another , and this whole block is what being spread on the grid.. and actually, today it would be easier to do with the .column and orphans/widows in css3 . thanks again.. – Foti

Then JS can be your option : check for line-height (or a non-standard attribute) in your first div, and calculate your height with it. – Multilingual

yep - thought of that . in fact, i am checking out masonry now . but still I think that it should be a standard css property :-) – Foti

Just thought I'd let you know that your clearfix hack link is now down – Unjaundiced

Answer 2

Why are you so opposed to the idea of setting min-height in ems? If you have line-height set in ems, multiply that by three and you got your desired height!

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

Fiddled

Update: setting min-height to three lines is an exercise in futility - it does not account for scenarios where content does not fit into the space available. You could use faux columns instead to make content appear to be of uniform height within the row

Flavine

Thanks for your answer - it illustrates the problem exactly . care to resize the output pane in the fiddle ?? :-) – Foti

I was assuming a fixed width layout. Anyway, what do you intend to do when the content doesn't fit in three lines? If you don't care (and you didn't specify the behavior for this scenario), just make min-height into height and set overflow to hidden. In the meantime I'll update my answer to use faux columns – Flavine

@ObmerkKronen: just to clarify my comment above, you are saying in the question one element can have 3 lines, and the next one only 2 or 1 line which implies you have control of container width and can guarantee content will never exceed 3 lines. When you resize the jsfiddle preview to be narrower, you're no longer honoring that guarantee – Flavine

yes . I can guarantee a max lines number. but not the min. that is the problem. faux columns will not work in my complete scenario (read the other comments) – Foti

@ObmerkKronen: great, that makes the fiddle I've provided a working solution. It doesn't care about minimum content size because of the way min-height works. – Flavine

thanks - but 1 - it is still having the same stacking problem. 2 - my question was how to do it WITHOUT using px /% /em for min-height. also , in my case and my scenario, the php side takes care of the maximum length, and faux columns can not be used because those divs are nested inside (more like "sandwiched" between) 2 others - which form the single block of the grid. – Foti

This worked for me -> line-height:1.5em; min-height:4.5em; – Stereotomy

Answer 3

I accomplished this by using flexbox and min-height.

Have each of your div elements within a flexbox container to get them to have the same height and react responsively (i.e. use breakpoints, flexbox wrap, and min-width to ensure that the probability of having more than 3 lines of text is low). Then for each of your internal elements, set the min-height and line-height values like @o.v. suggested. min-height should equal font-size * line-height multiplier.

I needed the internal paragraphs to be at least 2 lines high (there is a high probability that they would contain 1 or 2 lines of text, with a very low probability that they would contain more than 2 lines of text), so this is what I ended up with:

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

Levkas

(number of lines) * (font-size) * (line-height multiplier) + (padding-top) + (padding-bottom) – Haber

Answer 4

In 2024, yes you can using min-height: 1lh;

lh means line height: 1lh is 1 line, 3lh is 3 lines

Line height varies according to font size

Browser support is picking up: https://caniuse.com/?search=lh%20unit

Here's a demo:

.one-line {
  min-height: 1lh;
  background: cyan;
  color: black;
}

.three-lines {
  min-height: 3lh;
  background: blue;
  color: white;
}

.font-size-sm {
  font-size: 16px;
}

.font-size-lg {
  font-size: 32px;
}

<div class="one-line font-size-sm">1 line small font</div>
<div class="three-lines font-size-sm">3 lines small font</div>

<div class="one-line font-size-lg">1 line large font</div>
<div class="three-lines font-size-lg">3 lines large font</div>

Ichthyosaur

Answer 5

I dont know why would you want that..but you could fix the height and width of the div class according to the size of the font you are gonna use. say your font size is 10px and you are gonna use 10 px padding then use divs with 50px height.. then add a margin-bottom to those divs and you are good to go i think!

Deodorize

thanks, I had this solution before - but like I said, I am trying to see if it can be made WITHOUT to specify and px sizes ...also, by adding a margin-bottom, it will be appended also to the full dives, not only the half empty ones .. – Foti

I don't think if it is possible to add height and width to the divs like that. like we do with textarea. I hope some hack is there. Need to find out. – Deodorize

Exactly my question here : find a hack to specify a line height like with input area ! (and maybe someone should suggest it to the css3 development team :-) ) – Foti