JSFiddle - React, Tailwind, and code Playground

by rosshj

HTML

<h1>I'm a H1 Title Woot!</h1>

<h2>H2 Title Here Hanging Out</h2>

<ul>
  <li>#1 item goes here</li>
  <li>#2 item that is a bit longer</li>
  <li>#3 item That is really long happens right now</li>
  <li>#4 is the the last item</h2>
</ul>
      
<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>
      
<p id="truncate2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

CSS

h1 {
  color: green;
  font-size: 2em;
  margin: 0 0 20px 0;
}
h2 {
  color: red;
  font-size: 2em;
  margin: 0 0 20px 0;
}
ul {
  color: orange;
  font-size: 1.5em;
  margin: 0 0 20px 0;
}
p {
  color: blue;
  font-size: 1.5em;
  margin: 0 0 20px 0;
}

JavaScript

// Truncate but leave last word
var h1Title = $('h1').text();
if (h1Title.length > 15) {
  var chopWord = h1Title.trim().substring(0, 15).split(" ").slice(0, -1).join(" ") + "…";
  $('h1').text(chopWord);
}

// Truncate to specific character
var h2Title = $('h2').text();
if (h2Title.length > 15) {
  var chopCharacter = h2Title.trim().substring(0, 15) + "…";
  $('h2').text(chopCharacter);
}

// Truncate all siblings at specific character
$('ul li').each(function() {
  var entryTitle = $(this).text().trim();
  if (entryTitle.length > 20) {
    var chopCharacter = entryTitle.substring(0, 20) + "…";
    $(this).text(chopCharacter);
  }
});

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

// Truncate to specific character
var myTag = $('#truncate2').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate2').text(truncated);
}