How to truncate text, if there are more than three lines of text?
Question
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 ...
3 answers
solution1
1 2019-11-27 07:09:35
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>
solution2
0 2019-11-27 10:32:21
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.
solution3
0 2019-12-03 12:57:31
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.