Written and tested by the MD Converter editorial team
CSS Line Wrapping: white-space, word-break, and CJK
Choose CSS white-space, overflow-wrap, word-break, and CJK line-break rules for Markdown HTML, code, tables, and reliable PDF output.
What you’ll learn
- Core CSS for wrapping and line breaking:
white-space,overflow-wrap,word-break, andline-break(especially for CJK). - Why long Latin strings, URLs, and Japanese mixed text behave differently.
- Common patterns for
pre/codeblocks. - What to verify when you go from Markdown → HTML → print/PDF.
Markdown is easy to author, but how lines break in the browser is a CSS concern. This page is a practical, document-focused primer.
Line breaks vs wrapping
- Source newlines in Markdown become
<p>boundaries,<br>, or ignored—depending on the Markdown rules. - Visual wrapping is the browser fitting text to the line box width. This article focuses on CSS wrapping and related rules.
For “overall polish,” see Better-Looking Markdown PDFs.
white-space — preserve spaces and newlines?
| Value | Typical behavior |
|---|---|
normal | Collapse spaces, wrap when needed |
nowrap | No wrapping; often overflows horizontally |
pre | Preserve spaces and newlines; often paired with monospace fonts |
pre-wrap | Like pre, but can wrap at the line end |
pre-line | Preserve newlines; collapse spaces |
Code blocks often use pre or pre-wrap. Plain pre can overflow on long lines unless overflow-x or wrapping is added.
overflow-wrap (word-wrap) — break inside long words?
normal— Wrap at word boundaries when possible.break-word— Allow breaks inside a word to avoid overflow.
Useful for long URLs or long tokens in paragraphs.
word-break — CJK and mixed-language breaks
| Value | Notes |
|---|---|
normal | Default behavior |
break-all | Any character can start a new line (can hurt readability in Japanese body text) |
keep-all | Prefer breaks between “words” in some scripts (behavior varies) |
Avoid applying break-all to entire Japanese paragraphs. Scope it to problematic tokens.
line-break — stricter punctuation rules
Values like strict / loose influence line-breaking rules around punctuation. Browser support varies. Often you’ll use different rules for body text vs tables vs code.
hyphens — hyphenation for Latin text
hyphens: auto depends on language tags and font support. Don’t rely on it for Japanese-first documents.
Code blocks: common patterns
| Issue | Approach |
|---|---|
| Long horizontal lines | overflow-x: auto on pre, or white-space: pre-wrap |
| Readability | font-family with a monospace stack |
| Print/PDF | Split long lines in the source when needed |
Fenced Markdown code usually becomes <pre><code>; your CSS determines the final look.
Tables and images
Tables often need combined width/table-layout/word-break tuning. Images usually need max-width: 100% to avoid overflow—more about layout than “line breaks” per se.
Checklist: Markdown → HTML → PDF
- Inspect applied styles:
white-space,overflow-wrap,word-break. - Use print preview (including PDF) to catch overflow + pagination.
- Test with real content: URLs, code, mixed JA/EN.
When print layout matters, inspect the browser's print preview as well as the screen rendering. A line that fits a browser window can still overflow the narrower printable area after margins are applied.
FAQ
Should I word-break: break-all on everything?
Usually no for body text. Scope it to narrow columns or long tokens.
br vs CSS wrapping?
Use br for semantic line breaks. Responsive wrapping belongs to CSS.
Why does a URL still overflow with normal wrapping?
A long URL or identifier may have no natural break opportunity. Apply overflow-wrap: anywhere to the specific prose or table container, not globally to code that must preserve exact tokens.
Safe starting rules
Use ordinary wrapping for body prose, allow emergency wrapping for links and narrow table cells, and preserve code formatting separately. Test Japanese punctuation, mixed Japanese/English strings, long URLs, and UUID-like identifiers. A rule that fixes one extreme token can make normal paragraphs ugly when applied to the whole document.
Print preview is essential because a browser window can scroll horizontally while a PDF page cannot. Recheck line wrapping after changing fonts or margins; both alter the available width and can move content onto another page.
Summary
white-space,overflow-wrap,word-break, andline-breakcontrol wrapping and line breaks.- Treat body text, tables, and code with different rules when needed.
- Print/PDF needs a print preview pass—paper width ≠ screen width.