how to get only 3 lines from div with jquery

Question

I have one div I have give it some specific line-height and width.

I have put my code below

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

<div id="content" style="width: 80px; line-height: 20px">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>

but I want to show only 3 lines from that div and remove all other lives from that div and this 3 number comes dynamically and I want to remove all other lines with jquery.

do you need to actually remove the content? You could set a fix height for the `div` and use `overflow:hidden` on it — Swimmer F, Dec 24 '19 at 05:09
@SwimmerF Yes I want to actually remove content from div with jquery on base of dynamically get numbers — , Dec 24 '19 at 05:18
You might want to take a look at this question https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css — Christhofer Natalius, Dec 24 '19 at 06:27

Tân · Accepted Answer · 2019-12-24T06:24:09.123

1

You can set overflow and max-height css properties to the element, like this:

#content {
  overflow: hidden;
  max-height: 60px;
}

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

#content {
  overflow: hidden;
  max-height: 60px;
}

<div id="content" style="width: 80px; line-height: 20px;">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>

Update:

document.getElementById("content").onload = countLines();

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




    if (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth) {

        var clone = $(el.cloneNode(true)).hide()
                        .addClass('clone').appendTo('body');

        var text = el.innerText;

        while (text.length > 0 && clone.height() > $(el).height()) {

            text = text.substr(0, text.length - 1);
            clone.text(text + "");

        }

        $(el).text(clone.text());

        console.log($(el).text());
    }

}

#content {
  overflow: hidden;
  max-height: 60px;
}

.clone {
  position: absolute;
  height: auto!important;
  max-height: inherit!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content" style="width: 80px; line-height: 20px;">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>

edited Dec 24 '19 at 06:24

answered Dec 24 '19 at 05:10

Tân

1
15
56
102

thank you for replying but this 3 number dynamically comes like if the number comes 2 then only show 2 lines and remove all other lines from div with jquery – Dec 24 '19 at 05:17
@MNJ I've updated my answer. You can replace `height` css property with `max-height` property. If you have 2 `lines`, that's ok. But indeed, you have only 1 `line`. All of the text is just wrapped by the `width` property. So, `remove all other lines` mean nothing. You can hide it. – Tân Dec 24 '19 at 05:25
actually remove it in the sense I want to put that 3 lines in other div – Dec 24 '19 at 05:29
and this 3 number comes dynamically it can be 2,3,N so We have to make jquery according to this – Dec 24 '19 at 05:36
Thank you for you response but can you please tell me if I want to change my number like now if I want to show only 2 lines so what we neet to change in code and where can I change and how can I change it? – Dec 24 '19 at 06:09
@MNJ You can resize the value of `max-height` css property. Example: 3 `lines` = 60px => 2 lines = 2 * 60 / 3 = 40px => N lines = N * 60 / 3 = ?px – Tân Dec 24 '19 at 06:26
@MNJ But the value of `max-height` may be different if you change `font-family` or `font-size` – Tân Dec 24 '19 at 06:27
thank you for your reply but can you please explain your formula I am confused in that – Dec 24 '19 at 06:33
1

@MNJ Ahh... You can test the height to get the value first. Just set a random value of `max-height` for your `content ` element to display 3 lines (your element is currently containing a long text). In this example, I've set it to `60px`. By default, your `content` element needs `160px` of the `height` to display all of the text `hello how are you? hello...`. And you have 8 lines for all. 8 lines = 160px, so 3 lines = (3* 160 / 8) = 60px. Then, calculating the same formula: 2 lines = 40px.... – Tân Dec 24 '19 at 06:47
sorry for the interruption but how can I get visible lines and put it into another input or div – Dec 24 '19 at 09:11
because the problem is the same I can only show it but when I put it into another div or input all the lines passes not only lines which are visible – Dec 24 '19 at 09:15
but I am stuck with this and already try it so many times but I thought you are the only one who is helping me with this – Dec 24 '19 at 09:44
let me try this $(el).text() – Dec 24 '19 at 09:45
I have print it into the console and it shows me a full line hello how are you? hello how are you? hello how are you? hello how are you? – Dec 24 '19 at 09:48
sorry to disturb you and thank you for try to help me it's okay I will find another way and Thank you again – Dec 24 '19 at 10:29

how to get only 3 lines from div with jquery

1 Answers1