countVisibleWords

countVisibleWords.js

function countVisibleWords(el){
    var padding, em, numChars, numWords;
    var text = $(el).text();
    var textArr = text.split(' ');
    var max = el.clientHeight;

    var tmp = document.createElement(el.tagName.toLowerCase());
    tmp.className  = el.className + " -temp";

    // document.body.appendChild(tmp);
    // if(getComputedStyle)
    //     tmp.style.cssText = getComputedStyle(el, null).cssText;
    // else if(el.currentStyle)
    //     tmp.style.cssText = el.currentStyle.cssText;

    tmp.style.position = 'absolute';
    tmp.style.top = '0px';
    // tmp.style.overflow = 'visible';
    tmp.style.maxHeight = 'none';

    // Estimate number of characters that can fit.
    padding = tmp.style.padding;
    tmp.style.padding = '0';
    tmp.innerHTML = 'M';
    el.parentNode.appendChild(tmp);
    em = tmp.clientHeight;
    tmp.style.padding = padding;
    numChars = Math.floor(max/em);
    numWords = 0;

    var height = tmp.clientHeight;

    // Only one of the following loops will iterate more than one time
    // Depending on if we overestimated or underestimated.

    /* [BEGIN] COUNT BY CHARACTERS
    // -----------------------------------
    // Add characters until we reach overflow height
    while(height <= max && numChars <= text.length){
        tmp.innerHTML = text.substring(0, ++numChars);
        height = tmp.clientHeight;
    }

    // Remove characters until we no longer have overflow
    while(height > max && numChars){
        tmp.innerHTML = text.substring(0, --numChars);
        height = tmp.clientHeight;
    }
    // ------------------------------
    /* [END] COUNT BY CHARACTERS */

    /* [BEGIN] COUNT BY WORDS */
    // -----------------------------------
    // Add words until we reach overflow height
    while(height <= max && numWords <= textArr.length){
        tmp.innerHTML = textArr.slice(0, ++numWords).join(' ');
        height = tmp.clientHeight;
    }

    // Remove words until we no longer have overflow
    while(height > max && numWords){
        tmp.innerHTML = textArr.slice(0, --numWords).join(' ');
        height = tmp.clientHeight;
    }
    // ------------------------------
    /* [END] COUNT BY WORDS */

    // Remove temporary div
    tmp.remove();

    return numWords;
}

excerpt.scss

@mixin excerpt($font-size: $paragraph-font-size, $line-height: 1.42857, $lines-to-show: 2, $excerpt-bg: transparent) {
  background: $excerpt-bg;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  backface-visibility: hidden;
  // @-moz-document url-prefix() {
  //   overflow: hidden;
  //   position: relative;
  //   &:before {
  //     background: $excerpt-bg;
  //     bottom: 0;
  //     position: absolute;
  //     right: 0;
  //     float: right;
  //     content: '\2026';
  //     margin-left: -3rem;
  //     width: 3rem;
  //   }
  //   &:after {
  //     content: '';
  //     background: $excerpt-bg;
  //     position: absolute;
  //     height: 50px;
  //     width: 100%;
  //     z-index: 1;
  //   }
  // }

  &.-temp {
      position: absolute;
      opacity: 0;
  }

  .-ellipsis {
      position: relative;
      display: none;

      @media #{$from-md} {
          display: inline-block;
      }

      &:before {
          content:'...';
      }
  }

  .-after-ellipsis {
      @media #{$from-md} {
          display: inline-block;
          opacity: 0;
      }
  }
}