JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<h1>TextFit Examples</h1>

    <div class="column">
      <button onclick="testWidth()">Get width of text in pixels</button>
      <div id="test1">Test1</div>
    </div>

    <div class="column">
      <button onclick="testBestFit()">Best Fit</button>
      <div id="test2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>

    <div class="column">
      <button onclick="testTruncate()">Truncate</button>
      <div id="test3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>
    
    
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.textfit.js"></script>

CSS

.column {
        float: left;
        width: 400px;
        padding: 10px;
      }
      #test1 {
        border: 1px solid green;
        font-size: 20px;
      }
      #test2 {
        border: 1px solid red;
        width: 200px;
        height: 60px;
      }
      #test3 {
        border: 1px solid blue;
        width: 300px;
        height: 40px;
      }

JavaScript

function testWidth() {
        alert("Width: " + $('#test1').textfit('width','Testing'));
      }
      function testBestFit() {
        $("#test2").textfit('bestfit');
      }
      function testTruncate() {
        $("#test3").textfit('truncate');
      }
      $(document).ready(function(){
      });