JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul class="list">
  <li>
「東京」の地名は、1868年9月（明治元年（慶応4年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。
  </li>
</ul>



<ul class="centered-list">
  <li>
「東京」の地名は、1868年9月（明治元年（慶応4年）7月）に出された江戸ヲ称シテ東京ト為スノ詔書により、江戸の町奉行支配地域を管轄する東京府が設置されたことに始まる。
  </li>
</ul>

CSS

ul.list, ul.file-list, ul.centered-list {
      border-top: 1px solid #fff;
      background: #eee;
      list-style: none;
      margin: 0;
      padding: 2em 50px;
    }

    ul.list li,
    ul.file-list li,
    ul.centered-list li {
      padding: .5em 0;
      border-bottom: 1px solid #fff;
    }

JavaScript

/*!
 * Smart truncation jQuery plugin
 *
 * Copyright (c) 2012 Florian Plank (http://www.polarblau.com/)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * USAGE:
 *
 * $('.text li').smartTruncation();
 * $('.text-2 li').smartTruncation({
 *   "truncateCenter" : true
 * });
 * $('.files li').smartTruncation({
 *   protectExtensions" : true
 * });
 *
 */

(function($) {
  $.fn.smartTruncation = function(options) {

    var settings = $.merge(options || {}, {
      "protectExtensions" : false,
      "truncateCenter"    : false
    });

    return $(this).each(function() {
      var $this = $(this);

      // cache
      if (!$(window).data('smarttruncation.sizecache')) $(window).data('smarttruncation.sizecache', {});

      var fontAttributes = {
        'fontSize'  : $this.css('fontSize'),
        'fontFamily': $this.css('fontFamily'),
        'fontWeight': $this.css('fontWeight'),
        'fontStyle' : $this.css('fontStyle')
      };

      // use font properties for cachekey
      var cacheKey = (function(attributes) {
        var key = "";
        for (key in attributes) key += attributes[key];
        return key;
      })(fontAttributes);


      var sizes = {};

      // has text with identical font properties been measure before?
      if ($(window).data('smarttruncation.sizecache')[cacheKey]) {
        sizes = $(window).data('smarttruncation.sizecache')[cacheKey];

      } else {

        // let's get the width of the most common characters
        // in the current font-size
        var letters = "a b c d e f g h i j k l m n o p q r s t u v w x y z".split(" ");
        var numbers = "1 2 3 4 5 6 7 8 9 0".split(" ");
        var other   = "! § $ % & / ( ) = ? @ * ' + # - ; , : . < >".split(" ");
        var all     = letters.concat([" ", '"', "'"]).concat(numbers).concat(other).concat($.map(letters, function(letter) {
          return letter.toUpperCase();
        }));

        // build a test container
        var...