javascript - 如何通过两行的数量来限制我的标题？

Question

我有一个帖子宽度的网格，内容如下:

<img src="/" alt="Logo">
<h3>Heading</h3>
<p>Description</p>
<div>Date</div>

如果我的帖子标题超过两行，我想剪掉它并在第二行的末尾打印省略号。

有什么想法吗？

Answer 1

您可以使用 display:-webkit-box 和 -webkit-line-clamp: 2;，它会避免在您的标题中显示超过 2 行.

注意:

请注意，它存在一些跨浏览器问题，但目前您可以使用它。

CSS:

#myHeading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  display: -moz-box;
  -moz-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
}

演示:

#myHeading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
  display: -moz-box;
  -moz-box-orient: vertical;
  
  overflow: hidden;
  text-overflow: ellipsis;
}

<img src="/" alt="Logo">
<h3 id="myHeading">Heading id d yz eee,zbez, zeze e ee e, e,z e, e,zaezjhezeze zaez ezae e zazejzaee je zaje zaj ezae ze ejeazezaje ej j ezaje zaej azej ejjzejze j e zaeje eze zjeezejzadsdofdspflf dsufofod fdofds fdf fo dfofo udfodsfdHeading</h3>
<p>Description</p>
<div>Date</div>