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

Question

我有一个 post 宽度的网格，内容如下：

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

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

有什么想法吗？

Answer 1

根据您的要求，level of support CSS 只有 line-clamp 方法可能是合适的。

如果没有，可以使用一个名为 Succinct. There is a demo here 的小型 JS 库 - 只需在页面加载时向下滚动即可。

Answer 2

您可以将 display:-webkit-box 与 -webkit-line-clamp: 2; 一起使用，这将避免在您的标题中显示超过 2 行。

注：

请注意，它存在一些 cross-browser 问题，但目前您可以使用它。

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>

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

How can I limit my heading by the quantity of two lines?

html

javascript

css

overflow