Cutoff multiple lines of text with text-overflow: ellipsis

How can I have my text fill up the space given to a <p> tag, and then cut it off with ellipsis?

You can see an example of a "card" that is meant to be filled with text here. The card is a fixed height, 150px with 20px of padding. The paragraph element only has a fixed amount of space within the card, and it should not expand. The text should be cutoff when the space is used:

From other questions on SO, an element with text-overflow: ellipsis also needs text-wrap: nowrap. This solution is only acceptable if you want 1 line of text. In this case I want multiple lines of text, and then a cutoff when the text reaches the end of its vertical space.


ANSWERS:


You can use the webkit-line-clamp property - This property allows you to only show the lines you need so you can put 6 or 2 etc it is up to you. example below:

.card {
  width: 400px;
  height: 150px;
  background: white;
  border: 1px solid #EAEAEA;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.18);
  padding: 20px;
}

h4 {
  margin: 0;
}

p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
<div class="card">
  <h4>Test</h4>
  <p>
    A test or examination (informally, exam) is an assessment intended to measure a test-taker's knowledge, skill, aptitude, physical fitness, or classification in many other topics (e.g., beliefs).[1] A test may be administered verbally, on paper, on a computer, or in a confined area that requires a test taker to physically perform a set of skills. Tests vary in style, rigor and requirements. For example, in a closed book test, a test taker is often required to rely upon memory to respond to specific items whereas in an open book test, a test taker may use one or more supplementary tools such as a reference book or calculator when responding to an item.
  </p>
</div>

Clamp.js is an effective javascript solution.

Here is an example for how to use it:

// Get the DOM node.
var myParagraph = $('.myParagraph')[0];

// Clamp it.
$clamp(myParagraph, { clamp: 3 });

Edit: Doesn't work in Firefox



 MORE:


 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?
 ? CSS text-overflow in a table cell?
 ? css - display: table-cell and fixed width
 ? text-overflow not working with HTML5
 ? Truncate text with ellipsis in CSS (nested divs, not HTML table)
 ? Using ellipsis inside table
 ? Epllisis not working in IE
 ? Why doesn't CSS ellipsis work in table cell?
 ? BootStrap Table text ellipsis can not be with responsive web?