如何在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;),类似这样:

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>