cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h2><a href="#" data-text="Here is a test title">Here is a test title</a></h2>

<h2><a href="#" data-text="Here is a slightly longer title. We’ll see how it fares.">Here is a slightly longer title. We’ll see how it fares.</a></h2>

<h2><a href="#" data-text="Here is an even longer title that should start to test things decently. I’m not sure I would ever have a title this long, but there you go.">Here is an even longer title that should start to test things decently. I’m not sure I would ever have a title this long, but there you go.</a></h2>

<h2><a href="#" data-text="Here is a title that is beyond all titles. It carries on and on. Nihilism would state that this title does not deserve to exist. But nihilism is wrong, my friends, for carry on it does — all the way to the edge of the viewport.">Here is a title that is beyond all titles. It carries on and on. Nihilism would state that this title does not deserve to exist. But nihilism is wrong, my friends, for carry on it does — all the way to the edge of the viewport.</a></h2>
            
          
!
            
              $line-height: 1.2;
$lines: 3;

h2 {  
  line-height: $line-height;
  max-height: $lines * $line-height * 1em; //exact number of lines
  overflow: hidden;
  
  margin-bottom: 2em;
}

a {
  display: inline-block;
  max-height: ($lines + 1) * $line-height * 1em; //one more line
  position: relative;

  // webkit solution to multi-line text overflow
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;

  &:before { // for the ellipsis
    background: #fff; // fallback for old IE
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    bottom: $line-height * 1em;
    content: '\02026';
    height: $line-height * 1em;
    position: absolute;
    right: 0;
    text-align: right;
    width: 4em;
  }

  &:after { // to cover all but the last line of text
    background: #fff;
    content: attr(data-text);
    left: 0;
    height: ($lines - 1) * $line-height * 1em;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }

  @supports (-webkit-line-clamp: 2) {
    &:before, &:after {
      content: none;
    }
  }
  
  color: #00b;
  text-decoration: none;
  transition: color .3s ease-in-out;
  &:hover, &:focus, &:active {
    color: #b00;
  }
}
            
          
!
999px
Loading ..................

Console