Text Truncator

Paste text, set a maximum (in characters or words), pick an ellipsis style, and read the truncated result. Choose word-boundary truncation if you don't want to cut mid-word — useful for previews where a half-word looks broken.

Reach for it when generating list previews, social-card descriptions, or meta-tags that have hard length limits. Most CMSs ship with a built-in truncate, but those usually count by characters and break mid-word; this version gives you both modes.

The character counter is grapheme-aware: emoji and combining characters count as one visual unit, not as their underlying codepoint count. That matters when truncating user-generated text containing skin-tone emoji or accented Latin.

Two modes: character-based and word-based. Character-based truncation cuts at the exact character index — fast, predictable, but can split a word mid-grapheme. Word-based truncation finds the last whitespace boundary at or before the limit and cuts there, producing more readable previews at the cost of slightly variable output length. Both modes accept an ellipsis style: three dots ("..."), Unicode horizontal ellipsis ("…", a single character), em dash with ellipsis ("— …"), or no ellipsis at all.

Worked example. Input: "The quick brown fox jumps over the lazy dog" (43 chars). Character mode, limit 20, ellipsis "…": output "The quick brown fox…" (20 chars). Word mode, limit 20: also "The quick brown fox…" because "jumps" pushes past 20. Word mode, limit 25: "The quick brown fox jumps…" (26 chars including ellipsis). Increase the limit and word mode catches an additional word; character mode would have produced "The quick brown fox jumps" exactly at 25.

The grapheme-aware character counting matters for emoji and combined characters. JavaScript's `.length` returns codepoint count, not grapheme count — "👩‍💻" has length 5 (zero-width joiner sequence) but renders as one visible glyph. Naive truncation at length 4 cuts the emoji in half, leaving a partial sequence that renders broken. The tool uses Intl.Segmenter (or a polyfill) to count graphemes correctly, so a 50-character limit means 50 visible characters, not 50 codepoints.

Use cases. Meta description tags (Google truncates around 160 characters in SERP). Open Graph descriptions (social cards typically display 200-300 characters). Newsletter preview text (Gmail clips around 100 characters in the inbox preview line). Card UI components in apps (typically 50-150 characters depending on layout). Each context has a specific limit that the tool helps you target.

What the tool can't decide for you: the right limit. Different surfaces have different visible lengths, and "the right truncation" depends on whether the truncated text is the only thing the user sees (set the limit to roughly fit the visible area) or whether there's a way to see more (set the limit higher, since users can expand). Ask: what does the user lose if they only ever see this truncated version? If the answer is "nothing important," the limit is fine. If the answer is "the punchline," cut the prefix differently or use word mode at a longer limit.