0

I am trying to limit the lines of text to three lines. If the user types in the text that are more than three lines, I want the text from the 4th line and below to be delete/truncated.

For example if the user types in the following:

<div class="example">
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores
necessitatibus repellendus in nemo 
</div>

It should look like this:

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores...

https://jsfiddle.net/cliffeee/bjhvpf7q/27/

I am not sure what's the best approach to take to achieve this. I have tried using an ellipsis, but the issue I am running into is that, if there are more than three lines, it is hiding every line except line 1. I want it to hide only from line 4 and thereafter with the ...

Dilshod K
  • 2,924
  • 1
  • 13
  • 46
  • https://github.com/josephschmitt/Clamp.js does the trick – Gerard Nov 27 '19 at 07:07
  • Possible duplicate of [Applying an ellipsis to multiline text](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) – Ivana Bakija Nov 27 '19 at 07:08
  • Or, [Text overflow ellipsis on two lines](https://stackoverflow.com/q/15909489/1016716) or [Pure CSS Ellipsis For Three or More Lines of Text](https://stackoverflow.com/q/25448511/1016716) – Mr Lister Nov 27 '19 at 08:22
  • Are you still need the answer, or the problem got solved – Anmol Juneja Nov 28 '19 at 11:56
  • Hi @AnmolJuneja, the problem isn't fully resolved, as the solution you suggested doesn't work on all browsers. Is there an alternative solution? –  Nov 30 '19 at 06:05
  • Yes, i can do but for whole solution js is needed. Is it ok if i use JS. – Anmol Juneja Dec 03 '19 at 12:31
  • I am adding my solution, you can see and do let me know if it's works or not for you – Anmol Juneja Dec 03 '19 at 12:32

3 Answers3

1

You could try this:

.example:after {
    content: '...';
    display: inline-block;
    color: #000;
    font-size: 20px;
    position: relative;
    top: -40px;
    left: 31px;
}
.example {
    width: 200px;
      text-overflow: ellipsis;
    overflow: hidden;
   height: 3.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding: 0 0.5em;
}
<div class="example">
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit. Nostrum 
  dignissimos sint dolores
  necessitatibus repellendus in nemo 
  </div>
deczaloth
  • 7,094
  • 4
  • 24
  • 59
jaydeep patel
  • 867
  • 4
  • 14
0

There is a way to do this using -webkit-line-clamp, but it is not supported by all browsers. It may also stop working in the future, but right now it seems to work pretty well:

.example {
  line-height: 1.2em;
  height: 3.6em;
  width: 200px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
<div class="example">
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores
necessitatibus repellendus in nemo 
</div>

Here is a very similar question with some more answers.

Artur Noetzel
  • 323
  • 1
  • 2
  • 10
  • Yes, sadly this is not supported by all browsers. According to [caniuse.com](https://caniuse.com/#search=-webkit-line-clamp) there are quite a few who support this though. Unfortunately I don't know a clean css-only alternative aside from diverse hacks that I find quite unsatisfying. :( – Artur Noetzel Nov 28 '19 at 12:55
  • Yup!, BTW there is alternative solution for this. – Anmol Juneja Nov 28 '19 at 12:58
  • If you know a good solution why not just write another answer here? I am looking forward to see this solution. – Artur Noetzel Nov 28 '19 at 13:05
  • @AnmolJuneja, could you please share the alternate solution. This current solution is not working on some browsers. –  Nov 30 '19 at 06:03
0

You have to give inline line-height

I prefer this solution only when there is extremely need and client wants this. Otherwise i personally do not use this, as by default we have truncate option.

So, its up to you.

This can be a solution for your problem.

Good thing is that it's responsive :)

function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: " + lines);

  if (lines > 3) {
    $(el).addClass('truncate');
  }
}
body {
  padding: 40px;
}

p.truncate {
  position: relative;
  /* Height = Lineheight x No. of lines you want truncate  */
  height: calc(20px * 3);
  overflow: hidden;
  word-break: break-all;
}

p.truncate:after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: white;
  padding: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="countLines();">

  <h2>If more than 3 lines</h2>
  <p id="content" style="line-height: 20px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quidem sit dolores deleniti quibusdam odit, ratione nesciunt doloremque rem, consequuntur asperiores, reiciendis dolore quam ut! Pariatur repudiandae corporis voluptate rerum autem quaerat
    aut officiis incidunt, atque, beatae, ad laborum inventore
  </p>

</body>
Anmol Juneja
  • 325
  • 1
  • 9