How to Set Element Height for a Fixed Number of Lines of Text

How to set element height for a fixed number of lines of text

If you are going to use this you should ensure the line-height is always 2.5ex

.container {
  line-height: 2.5ex;
  height: 7.5ex; /* 2.5ex for each visible line */
  overflow: hidden;
}

Demo

Setting the height to a div to a multiple of line height

There is no way to express that in CSS.

The status text inherits its appearance from the global style sheet and does not know font size, family, line height, or anything.

That's not quite correct. Because text in your status div inherits its values for font-size, line-height, etc. via the cascade, it "knows" these and will style itself accordingly. The problem is that CSS doesn't offer a way of using these values for calculations. They are only implicitly considered when declaring new properties.

The only way to achieve exactly what you want is via JavaScript. I made a fiddle here using some jQuery. In my example, a simple body declaration acts as the ancestor. Run it with different font-size and line-height values in the body CSS.

In practice, I would combine this with your method as a fallback for scenarios where

1. JavaScript is disabled
2. the relevant ancestor's line-height is given as a percentage value (descendants inherit the calculated value) and you decide to change your status font-size. Example: The ancestor's font-size is 16px and its line-height is 120% (~ 19px). Now, if you decide your status needs more attention and declare .progressStatus {font-size: 24px;}, it will inherit the calculated line-height (still 19px). So you'd have a line-height smaller than the text size. Explicitly declaring a line-height as in your "half-solution" prevents that case from occuring.

css - min height by number of lines

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)

Limiting a div height to two lines of text inside it?

div {
    height: 1em; // that's one line, 2em for 2 lines, etc...
    line-height: 1em; // the height of one text line
    overflow: hidden;
}

This will display a div with a height the size of the current font size, and any overflow is clipped. As long as line-height and height are equal there will be one line of text. The proportion of height/line-height determines the number of lines displayed.

Is there anyway I can adjust the height of an LI element based on the number of lines of texts it contains? (More lines = taller LI) (No jQuery)

I thought perhaps a hidden element that acts as a clone as it is tough determining the length of text in an element in JS, so we just place the list items text in an element that grows with the amount of text that is present. This will allow us to get the width of the container and give us an accurate length in pixels that the text is taking up. We compare that to the clientWidth of your list items and find which elements are overflowing.

I thought it might be easier to style a flexbox elements children, so I wrapped the text in a span tag and placed it after the radio input. Then we add some styling to the selector and add the selector to the parent element. Place an align-items: center to vertically center the input and text.

const answers = document.querySelectorAll('.container-reading li')

function contOverflown(element) {
  let clone = document.createElement('DIV')
  let output = false
  clone.textContent = element.textContent
  clone.style.visibility = 'hidden'
  clone.style.padding = 0;
  clone.style.border = 'none';
  clone.style.position = 'absolute'
  document.body.append(clone)  
  element.clientWidth < clone.clientWidth ?
    output = true :
    null
  return output;
}

function resetLayoutForOverFlown(elements) {
  elements.forEach(answer => {
    if (contOverflown(answer) !== false) {
      let span = document.createElement('SPAN')
      span.style.width = '90%'
      span.textContent = answer.textContent
      let npt = answer.children[0]
      answer.textContent = ''
      answer.append(npt, span)
      answer.style.display = 'flex'
      answer.classList.add('overflown')
    }
  })
}

resetLayoutForOverFlown(answers)

.container-reading ul {
  list-style: none;
  padding: 20px;
  margin: 0;
}

.container-reading ul li {
  color: black;
  position: relative;
  width: 95%;
  font-size: 16px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}

.container-reading ul li input {
  padding-right: 2rem;
}

.overflown {
  display: flex;
  justify-content: flex-start;
  align-items: center;  
}

.overflown span {  
  margin-left: .3em;
  flex-wrap: wrap;
  flex: 2;
  max-width: calc(100% - 2em);
}

<div class='container-reading'>
  <ul>
    <li class="answer-item">
      <input type="radio" name="check"> This answer is a far too long for our list items content. We will wrap its text in a span tag and flex the input and span for a more cohesive layout
    </li>
    <li class="answer-item"><input type="radio" name="check"> This answer is ok</li>
    <li class="answer-item"><input type="radio" name="check"> This answer is also ok</li>
    <li class="answer-item"><input type="radio" name="check"> This answer is ok</li>
    <li class="answer-item">
      <input type="radio" name="check"> Yet another answer that is a far too long for our list items content, so JS will determine its length and write a new layout and style for its content
    </li>
  </ul>
</div>

Define a maximum number of line in a div

One option is line-clamp. It works on all browsers except IE11.

You can control how many lines want to show. Optionally, you can expand the content on hover / active / focus.

.content {  margin: 0 1em;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}
.content:hover,.content:active,.content:focus {  -webkit-line-clamp: unset;}

<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

---

Related Topics