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

ArifZoel
April 28, 2016
186 views
2 votes
3 Answers

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!

Answers

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>

You can use the canvas 2D rendering context to measure the text and determine how much text fits on two lines:

var h2 = document.querySelector("h2");
var h2Width = h2.getClientRects()[0].width;
var ctx = document.createElement("canvas").getContext("2d");
ctx.font = "bold 24px Arial";
var words = h2.textContent.split(" ");
var lineWhichFits = [];

var linesUsed = 0;
for(var i = 0;i < words.length;i++){
  lineWhichFits.push(words[i]);
  if(ctx.measureText(lineWhichFits.join(" ")).width > h2Width){
    linesUsed++;
    if(linesUsed == 2){
      words.splice(i);
      h2.textContent = words.join(" ") + "...";
      break;
    }
    lineWhichFits = [lineWhichFits.pop()];
  }
}

h2 {
  width: 400px;
  font: bold 24px Arial;
}

<h2>A title which has lots of text which means it will stretch over a big area, perfect for this demonstration because obvious reasons</h2>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers