如何限制两行的行进方向？

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,ze, e,zaezjhezeze zaez ezae e zazejzaee je zaje zaj ezae ze ejeazezaje ej j ezaje zaej azej ejjzejze je zaeje eze zjeezejzadsdofdspflf dsufofod fdofds fdf fo dfofo udfodsfdHeading</h3> <p>Description</p> <div>Date</div> 

Answer 2

根据您所需的支持级别，仅CSS line-clamp方法可能适用。

如果没有，那么可以使用一个名为Succinct的小型JS库来进行此操作。 有一个演示在这里 -只是向下滚动页面加载时。