Pure CSS multiline text with ellipsis

index.html

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

Pure-CSS-multiline-text-with-ellipsis.markdown

Pure CSS multiline text with ellipsis

A Pen by Martin Wolf on CodePen.

License.

style.scss

@import "compass/css3";
/* Martin Wolf CodePen Standard */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */


$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}