Truncate text over multiple lines with an ellipsis

Question

I am looking to cut off a block of text after 3 lines and show an ellipsis. I have created a codepen to show the issue, the text also requires to be centered.

<div class="container">
  <div class="container-text">
    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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>

.container {
  max-width: 300px;
  margin: 0 auto;
}
.container-text {
  border: solid 1px;
  text-align: center;  
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
}

https://codepen.io/gordonquinn/pen/qgrwwz

This is easy to achieve for 1 line but over multiple lines seems to be very difficult. There are a few suggested solutions online but no clean/reliable solutions.

Ideally looking for a CSS only solution or a simple JavaScript one if that is not possible.

Does the width of the container-text change? – YetAnotherBot Feb 01 '19 at 17:23 — YetAnotherBot, Feb 01 '19 at 17:23
https://css-tricks.com/line-clampin/ – YetAnotherBot Feb 01 '19 at 17:34 — YetAnotherBot, Feb 01 '19 at 17:34

score 1 · Accepted Answer · answered Feb 01 '19 at 17:31

You can do it using -webkit-line-clamp (see its support) though it will not work on IE and Firefox

.container {
  max-width: 300px;
  margin: 0 auto;
}

.container-text {
  border: solid 1px;
  text-align: center;
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
}

<div class="container">
  <div class="container-text">
    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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>

Or you can go with the clamp.js script

  $clamp($(".container-text")[0], {
    clamp: 3
  });

.container {
  max-width: 300px;
  margin: 0 auto;
}

.container-text {
  border: solid 1px;
  text-align: center;
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clamp-js@0.7.0/clamp.js"></script>

<div class="container">
  <div class="container-text">
    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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>

Awesome thanks! Went with Clamp Js in the end, used it in my Angular app and it worked perfectly! — Gordon Quinn, Feb 07 '19 at 10:28

Truncate text over multiple lines with an ellipsis

1 Answers1