How to break text with ellipsis on the second line in JavaScript?

Question

I have a post title like this:

h2 {
  width: 400px;
  }

<h2>How SEO Optimization Helps Your Website to Become on First Page of Search Engine Result</h2>

I want to make it appear like this:

    h2 {
      width: 400px;
      }

<h2>How SEO Optimization Helps Your Website to Become on First Page of...</h2>

How do I do that in JavaScript or even in JQuery?

I want to make my post title get hidden by ellipsis after the second line.

Thank you!

Answer 1

With webkit-line-clamp and webkit-box-orient like this:

h2 {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 21px;
  max-height:45px; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}

<h2>How SEO Optimization Helps Your Website to Become on First Page of Search Engine Result</h2>

Because firefox not supporting webkit-line-clamp (then doesn't show ellipsis), we can do some tricks with ::after selector ( without text-overflow: ellipsis; and -webkit-line-clamp: 2; ), something like this:

For Firefox (also for IE or other browser):

h2 {
  position:relative;
  width: 400px;
  overflow: hidden;
  display: -webkit-box;
  line-height: 21px;
  max-height:44px; 
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}

h2::after {
  letter-spacing: .10em;
  content:"...";
  position:absolute;
  bottom:0;
  right:0;
  padding:0 10px 2px 45px;
}

<h2 class="line-clamp">How SEO Optimization Helps Your Website to Become on First Page of Search Engine Result</h2>

Answer 2

This could be a whole lot more efficient than it is, but you can get the general idea. This method "feels" for the correct height by adding and removing nodes and testing the height of the block.

var headings = document.querySelectorAll('h2');

headings.forEach(function(el){
  var originalNodes = document.createDocumentFragment();
  while (el.firstChild) {
    var words = el.removeChild(el.firstChild);
    words.textContent.match(/\s?\w+\s?/g).forEach(function(word){
      originalNodes.appendChild(document.createTextNode(word));
    });
  }
  el.appendChild(document.createTextNode(String.fromCharCode(8230)));
  
  var currentHeight = el.getBoundingClientRect().height;

  lines = 0;
  while(originalNodes.childNodes.length > 0 && lines < 2) {
    el.insertBefore(originalNodes.removeChild(originalNodes.firstChild), el.lastChild);
    if(el.getBoundingClientRect().height > currentHeight) {
      currentHeight = el.getBoundingClientRect().height;
      lines++;
    }
  }
  if(lines === 2) {
    el.removeChild(el.lastChild.previousSibling);
    el.lastChild.previousSibling.textContent = el.lastChild.previousSibling.textContent.trim();
  } else {
    el.removeChild(el.lastChild);
  }
});

h2 {
  width: 400px;
}

<h2>How SEO Optimization Helps Your Website to Become on First Page of Search Engine Result</h2>

<h2>How SEO Optimization Helps Your Website to Become on First Page of Search</h2>

<h2>How SEO Optimization Helps Your Website to Become on Testing length</h2>

<h2>How</h2>