如何在JavaScript中的第二行用省略号打断文本

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

本文关键字：二行 省略号 文本 JavaScript      更新时间：2023-09-26

我有一个这样的帖子标题：

h2 {
  width: 400px;
  }
<h2>How SEO Optimization Helps Your Website to Become on First Page of Search Engine Result</h2>

我想让它看起来像这样：

    h2 {
      width: 400px;
      }
<h2>How SEO Optimization Helps Your Website to Become on First Page of...</h2>

我如何在JavaScript甚至JQuery中做到这一点？

我想在第二行后面用省略号隐藏我的文章标题。

谢谢

使用webkit线夹和webkit盒定向<kbd]，如下所示：>

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>

因为firefox不支持webkit-line-clamp（然后不显示省略号），我们可以用::after选择器（没有text-overflow: ellipsis;和-webkit-line-clamp: 2;）做一些技巧，比如：

对于Firefox（也适用于IE或其他浏览器）： 

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>

这可能比实际效率高得多，但您可以大致了解。这种方法通过添加和删除节点以及测试块的高度来"感觉"正确的高度。

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>

您可以使用画布2D渲染上下文来测量文本，并确定有多少文本适合两行：

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>

相关文章：