CODEWITHSUNDEEP
htmlheightcss
Obmerk Kronen
Obmerk Kronen

Reputation: 15949

css - min height by number of lines

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

Upvotes: 54

Views: 48642

Answers (5)

danday74
danday74

Reputation: 56986

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>

Upvotes: 14

dignoe
dignoe

Reputation: 1033

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

Upvotes: 11

zessx
zessx

Reputation: 68790

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)

Upvotes: 6

Oleg
Oleg

Reputation: 24988

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

Upvotes: 46

Praveen Puglia
Praveen Puglia

Reputation: 5631

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!

Upvotes: 0

Related Questions