javascript - 如何在 JavaScript 的第二行用省略号分隔文本？

Question

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

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 中做到这一点？

我想让我的帖子标题在第二行后被省略号隐藏。

谢谢!

Answer 1

与 webkit-line-clamp 和 webkit-box-orient 像这样:

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>