1

I'm trying to figure out how to detect line breaks (responsive) with JavaScript. I would like to remove the characters on line 3 and end line 2 with some dots like this '...'.

I know that the line-height is 20px. I know I check the amount of lines by dividing div-height / line-height. I don't know how to get the text until line 3 starts.

enter image description here

Tried the overflow and ellipses part from useless'MJ :

enter image description here enter image description here

Works only on the text he gave.. not on my own text.

Update #2:

Tried the solution of Matthias, but having problems making it responsive. I've tried adding a window on resize event and an extra div with the full text.

function ellipsizeTextBox(id) {
   var el = document.getElementById(id);
   var fullTextEl = $(el).parent().find('.MB-Item-Description-Full').text();
   var wordArray = fullTextEl.split(' ');
   while(el.scrollHeight > el.offsetHeight){
     wordArray.pop();
    el.innerHTML = wordArray.join(' ') + '...';
   }
}

window.onresize = function(event){
  $( ".MB-Item-Description" ).each(function( index ) {
    var id = $(this).attr('id');
    ellipsizeTextBox(id);
  });
}

Works great when making the browser smaller, doesn't add more words when making the browser bigger.

Improve this question
6
  • why not set a div max-height of line-height x 2 and then add text-overflow: ellipsis and overflow: hidden? Sounds like a XY Problem for me. Commented Mar 20, 2018 at 11:15
  • like @MatthiasSeifert has said just set the size of the the div to the max line-height you want Commented Mar 20, 2018 at 11:17
  • Matthias Seifert because that doesn't work, you can't use text-overflow: ellipsis on multiline text Commented Mar 20, 2018 at 11:17
  • Where is this content coming from? this look like a job for the server. not javascript Commented Mar 20, 2018 at 11:26
  • 1
    @zmuci Thanks for that info, never really was in that situaion so I assumed it would work. Commented Mar 20, 2018 at 11:29

2 Answers 2

Reset to default
2

My suggestion from the coments to use overflow: hidden and text-overflow: ellipsis does not work, because there is no ellipsis for multiline text. Learned that today, so your question helped me in some way, too :-D

Curious how to solve this, I found a little JS solution on this page, which acutally works good in my exmaple below:

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ') + '...';
     }
     
}
ellipsizeTextBox('truncate');
.text {
  line-height: 20px;
  max-height: 40px;
  width: 200px;
  border: 1px solid #ddd;
  margin: 10px;
  overflow: hidden;
}
<div class="text">
  Lorem ipsum
</div>

<div class="text" id="truncate">
  Het geheime dagboek van Hendrik Groen, Nederlands kampionen van de Schrijvers Competitie 1984.
</div>

So, no need for a plugin or something, just a few lines JS. I hope it helps :)

Edit: Added the text from your screenshot

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I your solution works. Though it's not really responsive, so I'm trying to add this function to a window.resize to make it responsive. I've added a full-text div, which will always contain the full text, so that innerHTML does not get overridden. Works fine while making the browser screen smaller, does not work when wanting to scale the browser up again.
Can you make a example fiddle so that I can play around with it a bit?
jsfiddle.net/0z8yumco/11 .. I was already playing around too..;)
Have you possibly found a solution? :)
Sorry, I had no time to investigate further yet, we have a stressful time at work here. I'll try something in my lunch break :) Sorry, that you have to wait
|
1

Have you tried using a css only solution like line-clamp?

.break-this {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
<div class="break-this">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum urna a purus vehicula, et sodales ante cursus. Etiam eu neque lorem. Fusce at libero arcu. Proin commodo porta ex. Vestibulum mollis pretium iaculis. Vestibulum mollis, ipsum vitae lacinia pretium, justo elit elementum tellus, vel pellentesque massa ex sit amet nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies ante mauris, at vestibulum ipsum maximus a. Nullam at vestibulum justo, vitae cursus nibh. Sed finibus ipsum in lobortis placerat.

Cras sed nibh sit amet nisi malesuada interdum feugiat vehicula turpis. Vivamus scelerisque ex risus, non auctor sem feugiat vel. Aenean in fermentum nunc. Aenean a tellus leo. Cras id bibendum ex. In maximus turpis in urna eleifend, sed lobortis libero dictum. Proin cursus rhoncus dolor et convallis. Integer facilisis, dui ac iaculis ultrices, tellus turpis accumsan sem, vel mollis diam nibh sit amet arcu. Nunc vulputate vel urna eu dignissim. Cras non turpis iaculis, porttitor nibh sit amet, hendrerit felis. Etiam id arcu venenatis, dictum enim a, facilisis magna. Aenean euismod viverra dui, a ultricies nunc fermentum eu. Aliquam erat volutpat.</div>

Improve this answer

2 Comments

I guess this does not really work across all browsers?
To bad it doesn't work for all browsers. Good one though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.