A Pen by Blake Bowen.

A-Pen-by-Blake-Bowen.markdown

A Pen by Blake Bowen

A Pen by Blake Bowen on CodePen.

License.

index.html

    <p>
      Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.<span class="ellipsis"><a href="#">&hellip;</a></span>
</p>

<p>Bacon ipsum dolor sit amet tongue meatloaf ribeye prosciutto venison flank ball tip turkey strip steak andouille beef ribs bacon tri-tip. Pork shankle meatball, boudin drumstick tri-tip hamburger sirloin. Meatloaf chuck pastrami doner, turkey ham jowl. Strip steak tail jowl drumstick capicola, cow venison shoulder hamburger pastrami. Ham hock pig hamburger meatloaf doner pork. Tongue turkey swine, frankfurter porchetta short ribs filet mignon shankle andouille.

Meatball beef bresaola tail salami filet mignon swine. Meatball meatloaf porchetta turkey beef pork turducken ham andouille doner pork chop brisket flank. Chicken turkey tail bresaola pastrami. Strip steak pig bacon shank drumstick ham hock short loin short ribs pastrami chicken landjaeger tongue andouille. Bresaola andouille shank doner capicola bacon fatback ground round spare ribs pancetta pork meatball. Capicola kielbasa pork, porchetta pork loin meatloaf bresaola turkey tenderloin beef ribs kevin leberkas strip steak tongue salami. Pork pork loin short loin strip steak andouille turducken turkey tongue chuck.

Pork belly turkey doner, beef ribs filet mignon capicola boudin strip steak chicken. Meatloaf biltong shank venison meatball tongue. Leberkas biltong beef kielbasa meatball, short ribs tail porchetta venison. Shank beef cow pig corned beef short ribs.

Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!<span class="ellipsis"><a href="#">&hellip;</a></span>
    </p>

script.js

$(function() {
  
  function ellip() {
    $('.ellipsis').each(function(n, el) {
    var $ellipsis = $(el),
        $parent = $ellipsis.parent(),
        constrainedHeight = $parent.height(),
        freeHeight;

      $parent.css('height', 'auto');
      freeHeight = $parent.height();
      $parent.css('height', constrainedHeight);

      if (freeHeight > constrainedHeight) {
        $ellipsis.show();
      } else if(freeHeight < constrainedHeight && $ellipsis.is(':visible')){
        $ellipsis.hide();
      }
    });  
  } 
    
  $(window).resize(function() {
      ellip();
  });
  
  ellip();  
});

style.scss

@import "compass";

      p {
        overflow: hidden;
        width: 100%;
        height: 200px;
        border: 5px solid #999;
        position: relative;
        font-size: 16px;
        line-height: 18px;        
      }

    .ellipsis {
      display: none;
      position: absolute;
      right: 5px;
      bottom: 2px;
      width: 40px;
      
      /* add a gradient background */
      background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
      background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 10%, white);
      background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 10%, white);
      background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 10%, white);
      background: linear-gradient(to right, rgba(255, 255, 255, 0), white 10%, white);
    }

    .ellipsis a {
      content: "\2026";
      display: inline-block;
      text-decoration: none;
      background-color: #ddd;
      border-radius: 3px;
      font-size: 16px;
      line-height: 5px;
      height: 16px;
      padding: 3px;
      float: right;

      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    .ellipsis a:before, .ellipsis a:after {
      font-size: 12px;
    }

    .ellipsis a:before {
       content: "["; 
    }

    .ellipsis a:after {
      content: "]";
    }