Ellipsis for one or more lines of text.md

Add ellipsis and limit number of lines for text

http://jsfiddle.net/gh/gist/library/pure/79a92c224bd45aef020a/

fiddle.css

.ellipsis-parent {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.ellipsis-parent span {
  line-height: normal; /* normal = 1.2 */
  font-size: 1em;
}

.line-clamp-3 {
  position: relative;
  height: 3.6em; /* font-size * line-height * 3 lines */
}

.line-clamp-3:after,.line-clamp-2:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%; /* hide 30% on the last line */
  height: 1.2em; /* height of one line: font-size * line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

.line-clamp-2 {
  position: relative;
  height: 2.4em; /* 1 * 1.2 * 2  */
}

.line-clamp-1 {
  position: relative;
  text-overflow: ellipsis;
  white-space:nowrap;
  height: auto;
}

@supports (-webkit-line-clamp: 3) {
  /* if -webkit-line-clamp is supported, overwrite fallback classes */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height:3.6em; /* 3.6 = font-size * line-height * 3 */
    height: auto;
  }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height:2.4em;
    height: auto;
  }
  .line-clamp-3:after,.line-clamp-2:after {
    display: none;
  }
}

fiddle.html

<div class="ellipsis-parent line-clamp-3">
  <span>3 lines Sed ut scelerisque erat. Aliquam imperdiet pulvinar quam, in hendrerit diam facilisis in. Nam vitae elit nec magna tempor condimentum. Suspendisse consectetur, tellus scelerisque cursus facilisis, nunc tellus tincidunt mauris, sed eleifend sapien velit quis risus. Pellentesque porta urna sed accumsan interdum. Vivamus mollis fermentum tellus, in blandit justo aliquam quis. Suspendisse ac tempus lacus. Cras massa turpis, elementum eget lectus quis, vestibulum tempus erat. Curabitur varius lacinia ante et vulputate. Maecenas tempus viverra velit, a lacinia eros vulputate in.</span>
</div>

<div class="ellipsis-parent line-clamp-2">
  <span>2 lines Sed ut scelerisque erat. Aliquam imperdiet pulvinar quam, in hendrerit diam facilisis in. Nam vitae elit nec magna tempor condimentum. Suspendisse consectetur, tellus scelerisque cursus facilisis, nunc tellus tincidunt mauris, sed eleifend sapien velit quis risus. Pellentesque porta urna sed accumsan interdum. Vivamus mollis fermentum tellus, in blandit justo aliquam quis. Suspendisse ac tempus lacus. Cras massa turpis, elementum eget lectus quis, vestibulum tempus erat. Curabitur varius lacinia ante et vulputate. Maecenas tempus viverra velit, a lacinia eros vulputate in.</span>
</div>

<div class="ellipsis-parent line-clamp-1">
  <span>1 line Sed ut scelerisque erat. Aliquam imperdiet pulvinar quam, in hendrerit diam facilisis in. Nam vitae elit nec magna tempor condimentum. Suspendisse consectetur, tellus scelerisque cursus facilisis, nunc tellus tincidunt mauris, sed eleifend sapien velit quis risus. Pellentesque porta urna sed accumsan interdum. Vivamus mollis fermentum tellus, in blandit justo aliquam quis. Suspendisse ac tempus lacus. Cras massa turpis, elementum eget lectus quis, vestibulum tempus erat. Curabitur varius lacinia ante et vulputate. Maecenas tempus viverra velit, a lacinia eros vulputate in.</span>
</div>

<div class="ellipsis-parent line-clamp-3">
  <span>It's only 1 line</span>
</div>

<div class="ellipsis-parent line-clamp-2">
  <span>It's only 1 line</span>
</div>

<div class="ellipsis-parent line-clamp-1">
  <span>It's only 1 line</span>
</div>

fiddle.manifest

normalize_css: no
panel_jss: 0
panel_css: 0
wrap: b