JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<p>Before they sold out twee wayfarers, salvia fashion axe bushwick mlkshk raw denim trust fund freegan. Seitan artisan kogi, YOLO ethnic truffaut try-hard +1 sartorial keffiyeh lo-fi narwhal. Street art wes anderson letterpress blog occupy, before they sold out hashtag high life fashion axe YOLO skateboard pinterest lo-fi 90's. Truffaut 90's wolf master cleanse organic. Austin flexitarian plaid, lomo umami gastropub 3 wolf moon chillwave 90's mustache you probably haven't heard of them fanny pack. Polaroid chillwave Austin, four loko DIY salvia readymade wes anderson brunch craft beer. Wes anderson etsy tumblr sriracha, plaid banksy disrupt portland.</p>

<p>Small batch tonx lo-fi craft beer, wes anderson semiotics keffiyeh leggings flannel irony carles intelligentsia. Intelligentsia neutra squid bespoke, mumblecore umami keffiyeh vice fingerstache viral selvage marfa tumblr DIY next level. Tattooed swag flannel kogi +1 food truck readymade fap. Fixie Austin pork belly, hoodie deep v cliche polaroid organic ugh vice meh wes anderson VHS. Butcher cred fap forage trust fund ennui. Authentic put a bird on it freegan terry richardson four loko twee 90's. Carles seitan deep v photo booth marfa tousled.</p>

<p>Readymade truffaut iphone brooklyn 3 wolf moon, 8-bit cosby sweater scenester. PBR ethnic mixtape, tattooed ennui selfies flexitarian trust fund keytar terry richardson odd future. PBR pour-over butcher, pinterest marfa 3 wolf moon swag trust fund umami lo-fi typewriter. Neutra art party mcsweeney's flexitarian. Odd future kogi irony, banh mi thundercats retro freegan cosby sweater cray pop-up readymade ugh. Skateboard YOLO chambray, sustainable selfies jean shorts mlkshk pork belly disrupt gastropub plaid sartorial wolf sriracha mumblecore. Wayfarers 3 wolf moon vice 8-bit, swag pitchfork ethnic pour-over.</p>

<p>Helvetica 3 wolf moon put a bird on it, skateboard fixie tousled american apparel cred actually pork belly keffiyeh butcher blue bottle church-key...

CSS

body {
    font: 16px/1.7 "Helvetica Neue", Arial, sans-serif;
}

.more-link {
    color: #444;
    background: #ddd;
    padding: 0 5px;
    margin: -2px 2px 0;
    height: 12px;
    line-height: 0.7em;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

JavaScript

// jquery.tldr.js
//
// Micro Read-more Script
// Substring paragraphs that are verbose and long, while making them expandable with a "more" link.
//
// Date: 06, March 2013
// Author: Nijiko Yonskai
// Copyright: Mashape 2013
// License: MIT
(function ($) {
  var tldr = function (opts) {
    var options = $.extend({}, tldr.defaults, opts), $this;
    $(this).each(function() {
      $this = $(this);
      $this.data("o", options);
      tldr.shorten($this);
    });
  };

  tldr.defaults = {
    text: {
      more: '&hellip;',
      less: '&laquo;'
    },
    length: 136
  };

  tldr.shorten = function ($this) {
    var html = $this.html(), data = $this.data("o");

    if (html.length < data.length) return;
    else $this.data("original", html.trim());

    var less = data.text.less,
      more = data.text.more,
      position = html.substr(0, data.length).lastIndexOf(" "),
      text = html.trim().substring(0, position).split(" ").slice(0, -1).join(" "),
      container = $('<span class="more-contaner">' + text + '</span>'),
      link = $('<span class="more-link">' + data.text.more + '</span>');

    link.click(function (e) {
      var original = (container.hasClass('more-original'));
      container[original ? 'removeClass' : 'addClass']('more-original');
      container.html(original ? text : $this.data("original"));
      link.html(original ? more : less);
    });

    $this.html(container).append(link);
  };

  $.fn.tldr = tldr;
})(jQuery);

$ ("p").tldr();