# Truncate.js: A jQuery-era text truncator that still has one useful trick

> Truncate.js is a small JavaScript library from 2016 that truncates HTML to a fixed number of lines, with expand and collapse. It depends on jQuery, has real caveats around padding and floats, and offers a middle-position option that few modern tools bother with.

**jeffchan/truncate.js** — fast, intelligent javascript text truncation

- Repository: https://github.com/jeffchan/truncate.js
- Stars: 100 · Forks: 38
- Language: JavaScript
- License: MIT
- Published: 2026-08-17 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/jeffchan-truncate-js

## What Truncate.js actually solves

Truncate.js solves a specific, narrow problem: cutting HTML content to a fixed number of lines while keeping the markup valid and the result visually clean. The README positions it as 'fast, intelligent Javascript text truncation.' The intelligence is in its handling of nested HTML, which plain CSS line-clamp cannot do because it simply hides overflow. Truncate.js measures line height, inserts an ellipsis at the cut point, and lets you add a 'Show More' button. It is for developers who need a controlled, interactive truncation experience on content that is not plain text. The library targets jQuery users first, with a plugin interface, and also offers a vanilla object for those who want to avoid the plugin style but still need jQuery as a dependency.

## The mechanism: measuring lines, not characters

The core idea is to measure the rendered height of the container and compare it to the target number of lines. You set a lineHeight option, defaulting to 'auto', which the library uses to calculate the maximum height for the given line count. It then walks through the DOM, removing or hiding content until the height fits. The ellipsis is inserted at the truncation point, and you can also supply custom HTML for a showMore button. The expand method restores the original HTML, and collapse re-applies truncation using cached HTML. This is a measurement-based approach, not a character-count approach, so it works with proportional fonts and variable-width text. The README notes that the middle position is difficult with nested elements, which suggests the algorithm has to identify a point somewhere inside the text, not just at the end.

## Getting it running: commands and options

The README gives clear build and usage instructions. To build, you need Node and npm, then run 'npm install' followed by 'npm run build'. The output lands in the dist folder. You can also use Gulp directly: install gulp-cli globally, then 'npm install' and 'gulp build'. For development, run 'npm run lint' and 'npm run test' to check code style and run the Mocha/Chai test suite. The API is straightforward. As a jQuery plugin, you call $('#element').truncate({ lines: 2 }). To update content, use 'update' with new HTML. 'expand' and 'collapse' toggle the state, and 'config' changes options like lines. The vanilla object constructor is 'new Truncate(element, options)', and it adds two properties not available in the plugin: isTruncated and isCollapsed, which give you state information. Options include lineHeight, lines, ellipsis, showMore, showLess, position (start, middle, end), and maxHeight, which truncates to a pixel height instead of a line count.

## Known failure modes: floats, padding, and uneven line heights

The README is honest about where Truncate.js breaks. It fails when truncating a node that contains a floating element, because the float disrupts the height calculation. It also fails with descendant elements that have padding, because padding adds to the rendered height in ways the measurement does not account for. Text with varying line heights, such as a mix of small and large fonts, also breaks the line count assumption. The middle truncation position is flagged as very difficult with nested elements. These are real constraints, not theoretical. If your content uses floated images, padded spans, or inline elements with different font sizes, you will get wrong truncation or no truncation. The README points to demo/demo.html for examples of what works and what does not, which is a practical way to test your specific markup before committing.

## The alternative: CSS line-clamp and its limits

A modern alternative is CSS line-clamp, which is now supported in most browsers. With line-clamp, you set a container to display: -webkit-box, -webkit-box-orient: vertical, and -webkit-line-clamp: 2, and the browser truncates at the line boundary, adding an ellipsis. The difference in approach is fundamental: line-clamp is a pure CSS rendering feature, so it requires no JavaScript, no jQuery, and no measurement. It handles floats and padding better because the browser does the layout internally. However, line-clamp cannot insert a 'Show More' button or provide expand/collapse behavior. You would need additional JavaScript to toggle a class that removes the clamp. Truncate.js gives you that interactivity out of the box, plus the ability to truncate from the start or middle, which line-clamp cannot do. If you need middle truncation, Truncate.js is one of the few libraries that attempts it, even with its caveats.

## Maintenance and license: a frozen project

Truncate.js has not seen a commit since June 2016, and the last release is 1.1.2 from that date. The repository is not archived, but the lack of activity means you should treat it as frozen. There is no documented migration path or upgrade process beyond the build steps. The license is MIT, which permits commercial use, modification, and redistribution, with the condition that the copyright notice is preserved. That is a permissive license, so you can fork the code and fix bugs yourself without legal friction, but you will be maintaining it on your own. The README mentions gulp as the builder, which is an older toolchain, and the dependency on jQuery is a significant constraint for any modern project. If you adopt it, plan to vendor the code and patch it as needed, because there is no upstream support.

## Who should adopt it and what to verify first

Truncate.js is a reasonable choice for a legacy web application that already uses jQuery and needs a line-based truncator with expand and collapse, especially if you need middle truncation. It is a wrong tool for new projects, for jQuery-free environments, or for content with complex CSS layouts. Before you adopt, run the demo and test your actual HTML structure against the caveats. Specifically, check if any content block contains floats, padded descendants, or mixed line heights. Also verify that the middle position works with your nested elements, because the README warns it is difficult. If you need a modern, dependency-free solution, look at CSS line-clamp and add a small script for the expand/collapse toggle. The final judgement: Truncate.js is a functional but aging library, and its only unique advantage is the middle truncation feature, which is fragile in practice. Unless you have that exact need and can live with the jQuery requirement, you should pass on it.

## Conclusion

Adopt Truncate.js if you are maintaining a legacy jQuery-based site, need a line-based truncator with an expand/collapse workflow, and can live with the documented caveats around floats, padding, and varying line heights. Avoid it for new projects, especially those without jQuery, since the library has not been updated since 2016 and depends on an aging dependency. Before adopting, verify that your target content does not include floating elements or descendant padding, and test the middle position with your actual HTML structure, because the README warns it is difficult with nested elements. Also confirm that the MIT license suits your distribution model, and be prepared to fork the code if you need fixes, as no maintainer activity is visible.

## FAQ

### How do I truncate a string with truncate.js?

truncate.js does not truncate strings. It truncates a DOM node by line count, so you pass it an element and options such as lines and lineHeight, with ellipsis, showMore, showLess, position, and maxHeight available alongside them.

### How do I use trim() in JavaScript, and how does truncate.js relate?

They do different jobs. trim() is a string operation, while truncate.js shortens rendered content by line count and keeps the HTML intact. The repository only covers the second, so it is no substitute for trimming whitespace or a prefix.

### What are the known caveats of truncate.js?

It fails where the text height cannot be easily calculated: nodes with a floating element, nodes with descendant elements that have padding, and nodes with text of varying line heights. The middle position is also difficult with nested elements, and demo/demo.html shows what works.

### Does truncate.js need jQuery?

The README says it currently depends on jQuery, but package.json lists jquery only in devDependencies. It can be used as a jQuery plugin or as a vanilla object with new Truncate(element, options), and the isTruncated and isCollapsed properties are only available in the object form.

### How do I build and test truncate.js?

Run npm install then npm run build, which uses gulp build and writes output to the dist folder. Linting is npm run lint via gulp lint and JSHint, and the tests run with npm run test, which invokes mocha-phantomjs against test/phantomjs/truncate-test.html.

## Sources

- [Official README](https://github.com/jeffchan/truncate.js#readme)
- [Project repository](https://github.com/jeffchan/truncate.js)
- [Release notes](https://github.com/jeffchan/truncate.js/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jeffchan-truncate-js