Free Developer Tool
Text Wrap & Line-Count Calculator
See exactly how many lines your text wraps to — and its total height — at any container width, font, and line height. Powered by Pretext.js with zero DOM reflow.
Computed with Pretext's layoutWithLines() — pure arithmetic, zero DOM reads.
What Does the Text Wrap Calculator Do?
Given a block of text, a font, and a container width, this tool reports how many lines the text will occupy when it wraps, how tall the block will be in pixels, and the width of the widest line. These three numbers are what you need to reserve vertical space for content before it renders — the core problem behind virtual scrolling, chat timelines, accordions, and responsive cards.
Drag the container width and the line count updates live, so you can find the exact breakpoint where a paragraph spills onto an extra line.
How Line Count & Height Are Computed
import { prepare, layout } from '@chenglou/pretext';
const prepared = prepare(text, '16px Arial');
const { lineCount, height } = layout(prepared, 360, 24);
// lineCount → number of wrapped lines
// height → lineCount * lineHeight, in pixelsThe prepare() call measures glyph widths once. Every layout() after that is pure arithmetic — reuse the same prepared handle to compute heights at mobile, tablet, and desktop widths in three cheap operations.
Where Line Count & Height Matter
Compute each row's height up front so a windowed list can position thousands of items.
Size message bubbles to their wrapped content before streaming tokens render.
Reserve the right vertical space at every breakpoint from one prepared handle.
Animate to the correct expanded height without a measure-then-reflow round trip.
How Text Wrap Works in the Browser
Text wrap is the process of breaking a run of text into lines so it fits a container width. The browser performs text wrap by walking the string, measuring each word, and starting a new line whenever the next word would overflow. A text wrap calculator reproduces that same logic outside the render pipeline, so you can know the result of text wrap before anything paints.
The output of text wrap is three numbers: the line count, the total height, and the width of the widest line. The text wrap calculator above reports all three. Because text wrap depends on the font, the font size, and the container width, changing any of those inputs changes the text wrap result — which is exactly why measuring beats guessing.
CSS gives you some control over text wrap through properties like overflow-wrap, word-break, and text-wrap, but none of them tell you the resulting line count in JavaScript. To compute text wrap programmatically you have to measure, and that is what this text wrap calculator does.
Why a Text Wrap Calculator Beats Estimating
A common shortcut is to estimate text wrap by dividing the string length by an approximate characters-per-line value. This breaks down immediately for proportional fonts, where each glyph has a different width, so the estimated text wrap is off by whole lines. An accurate text wrap requires measuring real glyph widths — the approach this text wrap calculator uses through Pretext.js.
The other tempting shortcut is to let the DOM perform the text wrap and then read offsetHeight. That works for one element, but reading layout forces a synchronous reflow, and doing text wrap this way for a long list causes layout thrashing. A text wrap calculator built on Canvas measurement avoids the reflow entirely, so you can run text wrap for thousands of items per frame.
Because the prepared handle is reusable, you can compute text wrap at several container widths from a single measurement — perfect for responsive breakpoints where the same paragraph has a different text wrap on mobile, tablet, and desktop.
Getting Accurate Text Wrap Results
For the text wrap calculator to match what the browser renders, measure with the exact font that will paint, and make sure web fonts are loaded first. A text wrap computed against a fallback font will report the wrong line count. Set the same font family, size, weight, and line height you use in production, then read the text wrap result above.
Line height does not change where the text wrap breaks, but it does change the total height — height is simply the line count multiplied by the line height. So if your text wrap shows four lines at a 24px line height, the block is 96px tall. Use the calculator to lock in both the line count from the text wrap and the pixel height you need to reserve.
Frequently Asked Questions
How can I calculate how many lines text will wrap to?
Measure each word's width at your font, then walk the words summing widths and inserting a break whenever the next word would exceed the container width. The number of breaks plus one is the line count, and line count × line height is the total height. This tool does exactly that via Pretext.js's layoutWithLines(), so you get the answer without rendering anything.
How do I get the rendered height of wrapped text without the DOM?
Total height = lineCount × lineHeight. Once you know how many lines the text wraps to at a given width, multiply by your line-height in pixels. Pretext computes the line count with pure arithmetic, so you can size containers, virtual-scroll rows, or chat bubbles before the browser paints.
Why is this better than measuring a hidden DOM element?
Creating a hidden element and reading offsetHeight forces a synchronous reflow each time. Doing that for hundreds of list items causes layout thrashing and jank. Pretext measures once per text+font and then answers any container width in ~0.001ms with no reflow.
Does it handle different fonts, weights, and line heights?
Yes. Set the font family, size, weight, line height, and container width and the line count, total height, and widest line update instantly. Load custom web fonts before measuring for exact results.
Is the text wrap calculator free?
Yes, it is completely free and runs entirely in your browser with no sign-in. Your text never leaves the page.
Use the Text Wrap Calculator for Exact Results
A text wrap calculator answers the one question CSS will not: how many lines, and how tall? The tool above gives you both instantly — size virtual-scroll rows, fit chat bubbles, or plan responsive layouts where the same paragraph wraps differently at each breakpoint.
Because it measures real glyph widths, the line count and height it reports match the browser exactly. Bookmark this text wrap calculator for quick checks, and wire the same Pretext.js engine into your app when you need wrap results at runtime. However you use it, measurement beats estimating every time.
More Pretext Text Tools
Pixel width of any string at any font.
Copy-paste truncation CSS + live preview.
Largest font size that fits a box.
All four tools are powered by Pretext.js, the open-source JavaScript text-measurement engine. Try the interactive playground to explore the full API.