Cutoff multiple lines of text with text-overflow: ellipsis

Question

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: https://jsfiddle.net/os986qsg/1/

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.

so you want your card class to expand out with your p text? just so i am clear as your question was not too clear? — Josh Stevens, Apr 04 '16 at 22:47
edited the question to be clearer (the card is a fixed height, the text should be cutoff) — Don P, Apr 04 '16 at 22:48
Possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) — xianshenglu, May 10 '18 at 09:29

Josh Stevens · Accepted Answer · 2016-04-04T23:20:20.643

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>

EDIT

This is only supported on Chrome and Safria

You can try this one which is supported globally, we use the :before and :after element to manipulate the p tag

.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 {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 112px; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
p:before {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
p:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

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

Thanks for finding this out. Know about its cross-browser compatibility? — Don P, Apr 04 '16 at 23:00
works on chrome, Safria not support in IE or FF.. let me work out another solution you can use which will be. — Josh Stevens, Apr 04 '16 at 23:06
Thanks Josh! Definitely closer, but having the ellipsis flowing into the elements padding means I can't use it. (Upvoted anyway). I'm looking at some JS options too — Don P, Apr 04 '16 at 23:18
I do want the "...". However, in your example it is placed inside the card's padding. I want it to be placed inside of the "p" element's space. — Don P, Apr 04 '16 at 23:21
ah its a nightmare itsnt it something like this you want to do a lightweight css development but it seems javascript may be your only hope here!! — Josh Stevens, Apr 04 '16 at 23:25

Don P · Answer 2 · 2016-04-05T19:45:46.813

1

Clamp.js is an effective javascript solution. https://github.com/josephschmitt/Clamp.js/

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

edited Apr 05 '16 at 19:45

answered Apr 04 '16 at 23:36

Don P

60,113
114
300
432

Cutoff multiple lines of text with text-overflow: ellipsis

2 Answers2