<section><div><h1>-webkit-line-clamp</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc lorem, gravida at ullamcorper id, faucibus id augue. Nullam feugiat consequat faucibus. Nam elementum lacus eget orci blandit eleifend. Proin euismod mauris purus, nec aliquet justo ullamcorper at. Curabitur ultricies dictum laoreet. Curabitur condimentum fermentum turpis, in varius lectus feugiat vestibulum. Vestibulum nec ligula vitae risus volutpat congue sed quis ipsum.</p></div></section>
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
  background-color:#ecf0f1;
  font-family: 'Roboto', sans-serif;
}

body,html{
  display:table;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

section{
  display:table-cell;
  vertical-align:middle;
}

section div{
  width:100%;
  max-width:450px;
  margin:0 auto;
  background-color:white;
  padding:15px 25px;
}

section div p{
  line-height:25px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow:hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.