jquery - How to break text with ellipsis on the second line in JavaScript? - Stack Overflow

admin管理员组

文章数量:1399919

I have a post title like this:

h2 {
  width: 400px;
  }

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

I have a post title like this:

h2 {
  width: 400px;
  }

<h2>How SEO Optimization Helps Your Website to Bee 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 Bee 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!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 28, 2016 at 20:20 metarmask 1,85711 gold badge1717 silver badges2020 bronze badges asked Apr 28, 2016 at 18:47 Arif ZoelArif Zoel 5711 silver badge77 bronze badges 6

• What are you wanting to acplish? Your question is not clear. – Retro Gamer Commented Apr 28, 2016 at 18:50
• Do you mean hide text-overflow with an ellipsis? If so, you can do that with css. – Derek Story Commented Apr 28, 2016 at 18:53
• 1 @dwreck08 i want to make the text ellipsis on the second line – Arif Zoel Commented Apr 28, 2016 at 18:56
• Your snippets do not show a second line. – Ed Bayiates Commented Apr 28, 2016 at 18:56
• @EdBayiates please run the snippet to see how it appear – Arif Zoel Commented Apr 28, 2016 at 18:58

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

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 Bee 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 Bee on First Page of Search Engine Result</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 Bee on First Page of Search Engine Result</h2>

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

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

<h2>How</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>

本文标签： jqueryHow to break text with ellipsis on the second line in JavaScriptStack Overflow