CSS Line Clamping with Fade Out Fallback

css-line-clamping-with-fade-out-fallback.markdown

CSS Line Clamping with Fade Out Fallback

Simple way to add line clamping to text. In browsers that support it, -webkit-line-clamp will be used. For those that don't, it will be faded out.

A Pen by liamsnowdon on CodePen.

License.

index.html

<div class="row">
  <div class="box">
    <div class="box__background"></div>
    <div class="box__content">
      <h3 class="box__title">Bacon ipsum dolor amet chuck filet mignon prosciutto brisket picanha.</h3>
      <a class="box__link" href="#">Go to link</a>
    </div>
  </div>
  
  <div class="box">
    <div class="box__background"></div>
    <div class="box__content">
      <h3 class="box__title">Corned beef pork loin chuck, short ribs strip steak flank ball tip t-bone frankfurter porchetta.</h3>
      <a class="box__link" href="#">Go to link</a>
    </div>
  </div>
  
  <div class="box">
    <div class="box__background"></div>
    <div class="box__content">
      <h3 class="box__title">Filet mignon picanha sausage ham hock turkey. Spare ribs rump t-bone hamburger.</h3>
      <a class="box__link" href="#">Go to link</a>
    </div>
  </div>
  
  <div class="box">
    <div class="box__background"></div>
    <div class="box__content">
      <h3 class="box__title">Beef ribs chicken chuck brisket alcatra turducken prosciutto shankle</h3>
      <a class="box__link" href="#">Go to link</a>
    </div>
  </div>
</div>

style.scss

// Base stuff

body {
  background: #f5f5f5;
  font-family: sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 0;
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

// The good stuff
.box {
  border: 1px solid #eee;
  width: 250px;

  &__background {
    background: #ddd;
    height: 100px;
    width: 100%;
  }
  
  &__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 150px;
    padding: 20px;
    background: #fff;
    text-align: center;
  }
  
  &__title {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 3.6em;
    line-height: 1.2em;

    &:after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.2em;
      content: '';
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }
    
    @supports (-webkit-line-clamp: 2) {
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      height: 2.4em;
      &:after {
        content: none;
      }
    }
  }
  
  &__link {
    margin-top: auto;
  }
}