word‑break & overflow‑wrap Playground - Online Text Wrapping
Compare break‑all, keep‑all, and overflow‑wrap: anywhere/break‑word. Paste long words and see how they wrap.
UD5 Toolkit
Test how Chinese, Japanese & Korean text wraps with different CSS word-break, line-break & overflow-wrap values.
这是一段中文文本,包含各种标点符号。「你好,世界!」这句话使用了中文引号。另外还有顿号、分号;以及冒号:等标点符号。通过调整line-break属性,可以观察标点符号在行首和行尾的不同表现。CJK文本换行测试:This is a mixed content example with English words and 中文汉字混合在一起。
line-break property. Chinese and Japanese typically lack spaces, while Korean uses spaces between words (similar to English), making word-break: keep-all particularly relevant for Korean content.
word-break: break-all forces the browser to break lines at any character—even inside non-CJK words like English terms or URLs. For CJK text, this is largely redundant since CJK characters already permit breaks between them. However, it significantly affects mixed-language content: long English words or URLs embedded in CJK paragraphs will be aggressively broken mid-word to prevent overflow. Use this when you need strict containment of content within narrow containers, but be aware it can make English text harder to read.
word-break: keep-all prevents line breaks within words and only allows breaks at spaces or other explicit separators. This is essential for Korean (which uses spaces between words) and also beneficial for Chinese/Japanese when you want to keep semantic units together. However, for Chinese and Japanese text without spaces, keep-all may cause text to overflow its container if no natural break points exist. Combine it with overflow-wrap: break-word as a safety net to handle overflow gracefully.
line-break property specifically controls how CJK punctuation and symbols behave at line boundaries. It accepts five values: auto (browser default), loose (more permissive—allows more punctuation at line start/end), normal (balanced rules), strict (restrictive—prevents certain punctuation from appearing at line start), and anywhere (allows breaks around any punctuation). For example, in Japanese typography, it's traditionally considered poor form to start a line with a small kana or certain punctuation marks—line-break: strict enforces these rules.
line-break: anywhere or overflow-wrap: anywhere arrived later than in Blink-based browsers (Chrome, Edge). To ensure cross-browser compatibility, always test with multiple browsers and consider using word-break: break-all or overflow-wrap: break-word as a fallback for overflow prevention. As of 2024, Safari 15.4+ supports most modern line-breaking properties.
word-break: normal as the base to allow natural CJK wrapping. (2) Add overflow-wrap: break-word to handle long English words or URLs that might overflow narrow containers. (3) Consider hyphens: auto for Latin portions (with appropriate lang attribute). (4) Test at all breakpoints—what looks fine at 768px may overflow at 320px. (5) For Korean specifically, word-break: keep-all preserves word integrity while overflow-wrap: break-word provides overflow safety.
overflow-wrap: break-word is lazy—it only breaks a word if it would otherwise overflow the container. The browser first tries to wrap at natural break points, and only resorts to mid-word breaking as a last resort. word-break: break-all is aggressive—it allows breaking at any character regardless of overflow, which can create awkward mid-word breaks even when not strictly necessary. For most use cases, overflow-wrap: break-word provides a better reading experience while still preventing overflow.
line-break: strict may require slightly more computation as the browser evaluates each character against complex rule sets. For performance-critical applications: use line-break: auto (the default), avoid unnecessary nesting of elements with different line-breaking rules, and consider content-visibility: auto for off-screen content. In practice, line-breaking performance is rarely a bottleneck compared to layout, paint, or JavaScript execution.
Compare break‑all, keep‑all, and overflow‑wrap: anywhere/break‑word. Paste long words and see how they wrap.
Set up first‑line indentation and hanging punctuation. See how they affect reading flow. Copy the CSS.
New CSS text‑spacing property for fine control over punctuation spacing. See the effect live. For advanced typography.
Convert any text into JavaScript‑style \uXXXX escape sequences and vice versa. Handles emojis. Useful for i18n development.
Paste rich text and clean it to plain text. Normalize line endings and whitespace. Prepare for code or databases.
Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Apply East Asian glyph variants like jis78, proportional-width, ruby. See the difference instantly. For CJK typography.
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
Check English spelling and get suggestions using the browser's built-in dictionary. Highlight errors instantly. No data leaves your machine.
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Detect browser support for font‑tech() and font‑format() values in @font‑face src. Check COLRv1, variable, etc.
Apply dyslexia‑friendly fonts, spacing, and background to any text. Preview and copy the formatted version. Improve readability.
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
Type or paste Korean Hangul and see the revised romanization. Also works backwards for basic words. Study aid.
Paste a Kanji and watch it drawn stroke by stroke with numbered sequence. Excellent for learners. Static data set.
Identify common grammar mistakes (subject-verb agreement, tense, articles) with simple rule-based analysis. Explanations provided. Not AI, purely rule-based and local.
Convert normal text to Unicode mathematical bold, italic, script, fraktur, and double‑struck. Copy rich text for anywhere.
Paste text and instantly see if it contains hidden zero‑width characters often used in steganography. Reveal invisible payloads.
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
Sort lines of text alphabetically, numerically, or by length. Reverse order supported. Perfect for organizing lists and data sets with complete privacy.
Practice positive/negative lookahead and lookbehind. See matches highlighted live. Master advanced regex.
Create scary, glitched text using combining diacritical marks. Control intensity. Perfect for horror memes and fun. Pure Unicode magic in browser.
Sort hundreds of lines alphabetically, reverse alphabetically, or by length. Deduplicate option. All local.
Browse the fonts installed on your system and type a custom phrase to see how it looks. Uses Local Font Access API where available.
Take a list of items and reverse the line order. The first becomes last. Simple and quick.
Check if an IBAN has the correct length and structure for its country. Early validation, no bank connection.