Text Truncator

Truncate text to a specific number of characters or words with custom ellipsis

What is it and how does it work?

Text truncation shortens text to a specified length — typically adding an ellipsis (…) at the end — to fit within display constraints. It appears constantly in UI design: card titles, table cells, breadcrumbs, mobile labels, search snippets, and notification previews all truncate text when it exceeds available space. The challenge is truncating intelligently: cutting at a word boundary rather than mid-word, handling multi-byte Unicode correctly, and preserving meaning.

This tool truncates text by character count, word count, or sentence count, with configurable suffix (ellipsis, "more...", or none). It handles edge cases like: Unicode surrogate pairs (emoji that span two code units), combining characters, HTML entity truncation safety (don't cut & to &amp), and smart truncation that preserves whole words. It also shows the byte length of the truncated string for API and database field validation.

Common use cases

• Card grid titles: truncate product names at 60 characters (word boundary) to keep a consistent card layout — "Apple MacBook Pro 16-inch with M3 Max chip, 48GB RAM..." fits neatly.
• Database column limits: truncate user bio text to 255 characters before inserting into a VARCHAR(255) column to prevent insertion errors.
• SEO meta description: trim a page description to 155–160 characters for the Google search snippet — longer descriptions are truncated by Google, often mid-sentence.

Frequently asked questions

What is the difference between character truncation and word truncation?

Character truncation cuts at an exact character position (e.g., position 100) — clean but may cut mid-word. Word truncation finds the last complete word before the limit — produces more readable results but the output length varies. For display purposes, word truncation is almost always preferred; for database column limits, character truncation is required.

How do I handle emoji and multi-byte Unicode in truncation?

Emoji use multiple code units in JavaScript (a string's `.length` counts UTF-16 code units, not Unicode code points). An emoji like 🎉 has length 2 in JS. The modern solution: use `Array.from(str).slice(0, limit).join("")` (which iterates over Unicode code points) or `[...str].slice(0, limit).join("")`. This prevents splitting surrogate pairs that would produce garbled output.

How does CSS text truncation work?

CSS can truncate single-line text automatically: `overflow: hidden; white-space: nowrap; text-overflow: ellipsis;` on a container with a defined width. For multi-line truncation, the non-standard but widely supported `-webkit-line-clamp` works: `display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;` limits to 3 lines. CSS truncation is purely visual — the full text remains in the DOM.

What character count is appropriate for different contexts?

Common limits: Twitter/X: 280 characters; SMS: 160 characters (single SMS), 153 (multi-part); SEO meta description: 155–160 characters; Google search snippet title: ~60 characters; Open Graph og:description: 200 characters; push notification body: 100–240 characters (platform-dependent); VARCHAR column common sizes: 255 or 1000 characters.

Text

Uppercase / Lowercase · Word Counter · Character Counter · Lorem Ipsum Generator · Remove Extra Spaces · Sort Text Lines