Smart way to truncate long strings

javascript

string-manipulation

javascript-utilities

best-practices

byAlex Kataev·Nov 29, 2024

Here's your stealthy ninja slice to trim a string, topped with an elegant twist of an ellipsis:

const truncate = (s, n) => s.length > n ? s.slice(0, n - 1) + '…' : s;

This line forges a function truncate where n is the power level, and s is your feisty string. It hands you back the string, cut down to the n characters, if it dared to exceed that level, tacked with an aesthetic '…'.

Advanced slicing and dicing

Don't cut words down in their prime

Keep your texts readable, avoid awkwardly truncated words with:

function truncateAtWord(str, max, ellipsis = '…') {
  if (str.length <= max) return str; // Takes the peaceful way out when things aren't escalating
  let trimmed = str.substr(0, max); 
  if (str[max] !== ' ') { 
    // Finds the last place of peace before the 'sliceocalypse'
    trimmed = trimmed.substr(0, Math.min(trimmed.length, trimmed.lastIndexOf(' ')));
  }
  return trimmed + ellipsis; // Brings the ellipsis into play
}

No innocent words were harmed in this example. 😎

Let CSS do the dirty work

Visually-snappy truncation for your dynamic divas:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This class truncate is your perfect wingman on a web date. It sets things up visually without altering the actual content!

Tailored string truncation

Forget genetic modification of String prototype. Meet its doppelgänger, courtesy of JavaScript proxies:

const smartTruncate = new Proxy(String.prototype, {
  apply: function (target, thisArg, [str, length]) {
    // Covertly overtakes the slice() method
    return String.prototype.slice.apply(str, [0, length]) + (str.length > length ? '…' : '');
  }
});

// Proxies—making 'truncatelligence' a thing
smartTruncate('A supercalifragilisticexpialidocious string', 10);

Traversal through edge cases and considerations

Edge case encounter

Truncating a URL may result in an "HTTP 404 Page Not Found". Truncating user contents may lead to #OopsOutOfContext or #MisleadingResults. Tread with caution!

Libraries and browser support

Double-check browser compatibility when using CSS truncation. Libraries like lodash and underscore.string provide comprehensive truncate methods as a royal road to resolution.