CSS Line Breaks & Wrapping — white-space, word-break, overflow-wrap, and line-break (CJK)
CSS wrapping after Markdown-to-HTML: when to use white-space, overflow-wrap, word-break, and line-break for CJK text. Patterns for code blocks, tables, and a checklist for print/PDF review.
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.
Open Markdown to PDF when you care about print layout.
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.
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.