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

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

Depending on your required level of support the CSS only line-clamp approach may be suitable.

If not, then there is a small JS library available to do this called Succinct . There is a demo here - just scroll down when the page loads.