如何用两条线的数量限制我的航向？

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>

Answer 2

根据您所需的level of support，仅CSS line-clamp方法可能适用。

如果没有，那么可以使用一个名为Succinct的小型JS库。有一个演示here - 只需在页面加载时向下滚动。