Lorem Ipsum Generator with slot preview and length cheatsheet

A lorem ipsum generator that does more than "number of paragraphs". Pick a slot, meaning Button, H1, Meta description, or Card, and the text gets fitted to that slot's typical length. Right next to it, you see how it renders in a real UI component at a viewport width you choose.

What happens when real content is longer than your placeholder?

Designs break when the real content drops in, usually because the layout was measured against a placeholder that was shorter. A button with five characters of Lorem Ipsum looks balanced until your label reads "Schedule a meeting". The slot mode closes that gap: text gets fitted to the typical length of the real card, the real headline, the real button.

The typical case: a 100-character placeholder in the mockup, the real input field caps at 60. With five characters of Lorem Ipsum, you never noticed. The gap between mockup placeholder and real production content is a typical reason for "looked great in Figma, broke in the browser". Slot mode flips the question: instead of "how many paragraphs?" it asks "into which slot?". A green, amber, or red status pill shows you whether you're inside the recommended range.

How long should a button, headline, or meta description be?

Every slot has a typical range, drawn from UX practice, a platform cap, or established convention. A button label usually stays under 30 characters because longer phrases read less clearly as a call to action. The title tag sits between 50 and 60 characters because search results clip it at the edge (Moz); the same span is a useful anchor for the on-page H1 if you keep them in sync. A meta description usually stays under 155 characters, or Google trims the snippet depending on device width.

The table at a glance (sources linked in the tool):

A note on the tweet counter: the displayed number is the JavaScript character count. X counts URLs as 23 characters and applies weighted counting to emoji and CJK, so for plain text the numbers match, but for posts with links or emoji your real X count will differ.

The tool links each slot range to its source. If your own text drifts a few characters outside, the counter flags it honestly amber or red. That's not "wrong", just outside the typical range.

When German layout-stress text is the more honest choice

Latin doesn't break your layout. German does. If your button label reads "Gesellschafterversammlung" or your card headline reads "Datenschutz-Folgenabschätzung", you notice it after launch, unless you test up front with text that produces the same word lengths. The "German (layout stress)" variant pulls from real DACH B2B sources and fills your mocks with compound nouns your CSS has to decide what to do with.

Examples real layouts trip on that Lorem Ipsum hides:

• Button: "Book a call" (11 chars) vs. "Gesellschafterversammlung einberufen" (36 chars). The second can overflow narrow or fixed-width buttons.
• Card headline: "Security first" (14 chars) vs. "Datenschutz-Folgenabschätzung" (29 chars) with a visible line break in the card preview.
• Mobile word lengths: Lorem Ipsum words average around five characters; German compounds can easily reach 18 to 25.

The layout-stress mode pulls from a curated corpus of German B2B web copy and inserts whole sentences, not remixed word lists. That keeps the prose readable, instead of looking like generator output.

Hyphenation in CSS: four options, four layouts

CSS gives you a fair number of ways to handle overflow (hyphenation, word-break, line-clamp, soft hyphens, layout changes). The preview shows four of them side by side, the ones that come up most often for long German compounds. Try them on a layout-stress text and you get the visual sense pure docs don't give you.

1. no break - hyphens: none plus overflow-wrap: normal. The word sits there rigidly and overflows the edge.
2. smart break (auto) - hyphens: auto plus overflow-wrap: break-word. The browser hyphenates by dictionary; requires a correct lang attribute on an ancestor.
3. break word - overflow-wrap: anywhere. Breaks anywhere, even mid-word. The nuclear option.
4. trim with … - text-overflow: ellipsis plus overflow: hidden plus white-space: nowrap. One line, cropped with three dots; only useful for single-line slots.

Default in the preview is "smart break (auto)". For it to land on German vocabulary, the stage sets lang="de" automatically once you pick the layout-stress variant.

Where does Lorem Ipsum actually come from?

"Lorem ipsum" is mangled Latin. The passage it comes from is Cicero's "De finibus bonorum et malorum" (45 BC), section 1.10.32. In the original, the sentence begins "Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit …" - the commas after "ipsum" and "sit" disappear in the typesetter version. Typesetters chopped the text into unusable fragments starting in the 16th century; "dolorem ipsum" lost its head and became "Lorem ipsum".

Why scrambled Cicero, not real Latin? Real Latin invites reading, the reviewer asks "what does it say?". "Lorem ipsum" is unreadable enough to not distract and readable enough to produce realistic line lengths and word rhythms. The canonical opener "Lorem ipsum dolor sit amet…" stuck as convention; you can toggle it on or off in the tool.

Frequently Asked Questions

How long should a button label be?

Around 14 to 30 characters is the usual span (Nielsen Norman Group). Shorter reads as vague ("OK", "Go"), longer stops reading as a call to action. Slot mode picks inside that range; a green / amber / red status pill flags it when your own text drifts outside.

What's the max length for a meta description?

Google states no hard character cutoff; in practice most snippets clip around 120 characters on mobile and 155 on desktop (Google Search Central). Anything beyond gets cut off with "…". The live preview here simulates that cut visually, so you see the truncation point before you ship the copy.

When is Lorem Ipsum the wrong choice?

In usability tests, hi-fi prototypes, and localization smoke tests, anywhere the reviewer reads the content. The moment someone could ask "but what does it actually say?", the placeholder loses its point. For DACH-market layouts the "German (layout stress)" variant is often the more honest choice.

Does my text leave the browser?

No. The generator runs in your browser; neither the generated characters nor whatever you type into the textarea leaves your device. No account, no server reading along, no persistence past your tab.