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

Question

I have a grid of posts width the content like this:

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

And if my post's heading has more than two lines, I would like to clip it and in the end of the second line print ellipsis.

Any ideas?

Answer 1

You can use a display:-webkit-box along with -webkit-line-clamp: 2;, it will avoid displaying more than 2 lines in your heading.

Note:

Note that it has some cross-browser issues but it's something you can go with, at the moment.

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;
}

Demo:

#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>