By the end of this tutorial, you’ll use Lodash’s _.truncate() confidently in real JavaScript projects.
Call _.truncate(str, options) with length and omission.
Set length to the max visible characters.
Customize omission (default ...).
Use separator to avoid mid-word cuts.
Build card excerpts and table cell snippets.
Original string stays intact.
_.truncate()?_.truncate() shortens a string to a maximum length and appends an omission (default ...) when the text exceeds that limit. Optional separator lets you cut at word boundaries instead of mid-word—ideal for card excerpts, notification previews, and table cells.
Think of _.truncate(text, { length: 80, separator: ' ' }) as “give me a readable preview that fits in this UI slot.” The original string is never modified.
_.truncate(string, [options])import truncate from "lodash/truncate";
const excerpt = truncate(
"Lodash truncate builds readable UI previews from long text.",
{ length: 35, separator: " " }
);
// -> "Lodash truncate builds readable..."| Task | Code pattern | Result |
|---|---|---|
| Default truncate | _.truncate(str, { length: 30 }) | Adds ... when over limit |
| Custom omission | { length: 50, omission: '…' } | Unicode ellipsis |
| Word boundary | { length: 40, separator: ' ' } | No mid-word cut |
| Regex separator | { separator: /,? +/ } | Split at commas/spaces |
| Under limit | _.truncate('Hi', { length: 10 }) | Returns unchanged |
| Import | import truncate from 'lodash/truncate' | Tree-shakeable |
NoReturns new string
...Configurable
spaceWord-aware cut
UI excerptsCards & previews
stringRequiredThe source string to truncate. Non-strings are coerced.
options.lengthOptionalMaximum length of the result including omission (default 30).
options.omissionOptionalSuffix when truncated (default '...').
options.separatorOptionalTruncate at last separator before limit (default ' ').
Practical _.truncate() patterns with copy-ready code and interactive Try It Yourself labs.
Core patterns for _.truncate() with copy-ready code.
Truncate Lorem ipsum to 20 characters with the default ... suffix.
const longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
const truncated = _.truncate(longText, { length: 20 });
console.log(truncated);
// -> "Lorem ipsum dolor..."Run the Try It editor to experiment with _.truncate() on your own strings.
Use a [Read more] suffix for article previews instead of ellipsis.
const article = "Lodash truncate helps you build readable excerpts in cards and lists.";
const preview = _.truncate(article, { length: 40, omission: " [Read more]" });
console.log(preview);Run the Try It editor to experiment with _.truncate() on your own strings.
Truncate at the last space before the limit so words are not cut in half.
const title = "Understanding Lodash string utilities in depth";
const cardTitle = _.truncate(title, { length: 30, separator: " " });
console.log(cardTitle);
// -> "Understanding Lodash string..."Run the Try It editor to experiment with _.truncate() on your own strings.
Real-world formatting and data-handling scenarios.
When text is shorter than length, no omission is appended.
const short = "Hello";
console.log(_.truncate(short, { length: 20 }));
// -> "Hello"Truncate at commas or spaces using a regex separator.
const csv = "apple, banana, cherry, date, elderberry";
const snippet = _.truncate(csv, { length: 18, separator: /,? +/ });
console.log(snippet);Native slice cuts exactly at an index without omission or word awareness.
const text = "Hello world from Lodash";
const lodashWay = _.truncate(text, { length: 12, separator: " " });
const nativeWay = text.slice(0, 12) + "...";
console.log("lodash:", lodashWay);
console.log("native:", nativeWay);_.truncate() WorksLodash coerces the input to a string.
If length is within the limit, return unchanged.
Apply separator to avoid mid-word breaks when configured.
Slice and append the omission suffix (default ...).
_.truncate() is non-mutating—strings are immutable in JavaScript.separator: ' ' for word-aware previews in UI cards.length are returned without an omission.Use _.truncate() whenever UI space is limited and readability matters. Configure length, omission, and separator once per component and reuse across card lists, notifications, and data tables.
New string returned
BasicsFit UI slots
CoreWord-aware cuts
PatternCards & tables
Use casePrior method
Nav_.truncate counts the omission toward length—so a 30-character limit with ... leaves 27 characters of visible text. Use separator to avoid awkward mid-word cuts in headings.
Open the Try It editor and run the examples with your own strings.
6 people found this page helpful