Lesson 10·Unit 4 · Scripts and layout·Wrapping rules & word segmentation·Lv 201·~7 min
Line breaking across writing systems
Latin scripts wrap at spaces. CJK wraps almost anywhere, except where typographic conventions (kinsoku shori) forbid it. Thai has no spaces at all. CSS line-break and Intl.Segmenter control the difference; defaults are wrong for half your audience.
By the end
- ·Say what kinsoku shori forbids, and enforce it with CSS line-break: strict.
- ·Explain how a browser wraps Thai text that contains no spaces: a segmentation dictionary.
- ·Pick the right CSS for an unbreakable URL, and know why word-break and nowrap are the wrong two.
The problem
A Japanese headline that wraps with a punctuation mark stranded at the start of the line looks unprofessional; the kinsoku-shori tradition forbids it. A Thai paragraph rendered with the default word-break setting either breaks mid-syllable (illegible) or doesn't break at all (overflows). A long German word in a narrow column breaks like a sledgehammer if you don't set the right policy. None of this surfaces in QA against English copy.
How it works
Where can a line break when there are no spaces?
English hands the layout engine an easy signal: break at the spaces. Chinese and Japanese write no spaces between words, so the engine is free to break between almost any two characters, except where typography forbids it. Japanese kinsoku shori is that list of prohibitions. A line must not begin with closing punctuation (。 、), small kana, or the prolonged-sound mark, and must not end with an opening bracket.
Thai is the harder case. It also writes no spaces, but a line can break only at word boundaries, and the text does not mark them. The engine finds them by running the text through a dictionary. That machinery is ordinary: your own code can call the same ICU segmentation through Intl.Segmenter.
CSS exposes the controls: line-break: strict versus loose sets how strictly the kana prohibitions apply, word-break: keep-all stops Korean from breaking inside words, and overflow-wrap: anywhere allows emergency breaks inside unbreakable tokens like URLs. The demo lets you test each one at an adjustable width. Test these rules with real text at narrow widths.
See it yourself
Try these, in order
Each step triggers a specific failure you should recognize on sight.
- 1Pick the Japanese sample, drag the column width to ~200px, and flip line-break between normal and strict. Under strict, lines re-wrap so 。、 and small kana (ゃゅょ) and the prolonged-sound mark ー never start a line. That is kinsoku shori as a CSS property.
- 2Switch to the Thai sample. Thai has no spaces between words, yet the browser wraps at word boundaries anyway: it runs a dictionary-based segmenter. Any code that assumed split(' ') breaks here.
- 3Pick the German sample at ~200px, then check “hyphens: auto”. The compound word overflows the column until you allow hyphenation. German UIs without hyphenation need wide min-widths.
- 4Pick the English long-URL sample and switch overflow-wrap from normal to anywhere. The URL finally breaks instead of overflowing the layout. overflow-wrap allows emergency breaks inside unbreakable tokens. line-break is the rule set for scripts.
Hyphenation needs a dictionary and a lang attribute. On this page it visibly fires only on the German and English samples.
Rendered output (280px wide)
Narrow the width below 200px and toggle between the modes. For CJK text, line-break: strict respects kinsoku rules. For English with the long URL, overflow-wrap: anywhere (or break-word) stops it overflowing the container. anywhere also lets the URL compress under flex and grid min-content sizing, which break-word does not.
Same text, four modes side-by-side
Sentence segmentation (Intl.Segmenter)
- #1订单确认后，我们会在24小时内发货：您可以随时在“我的订单”页面查看物流状态、预计送达时间，以及包含iPhone 15 Pro等商品的发票明细。
- #2如果在2026年12月31日前未收到货，请联系客服申请全额退款。
For Thai and Chinese without inter-word spaces, Intl.Segmenter uses ICU's dictionary-based segmentation, the same machinery the browser uses to wrap lines.
If you remember one thing
CJK and Thai do not wrap at spaces: they wrap by prohibition rules and dictionaries. Test narrow widths with line-break: strict and real text, not lorem ipsum.
What to do about it
- Set
line-break: strictglobally on body text, then verify that CJK quotation marks and brackets stay on the correct line. Most browsers default tonormal, which lets Japanese punctuation drift. - For Thai, Burmese, Khmer, and Lao, use
word-break: keep-allwithline-break: autoand rely on the browser's ICU-backed segmenter, or pre-segment withIntl.Segmenterif you need to inject zero-width spaces. - For European languages, set
overflow-wrap: anywhereon narrow columns (sidebars, tooltips, badges) so long compound words don't blow out the layout. - Test at 320px viewport width; that's where most wrapping bugs first surface.
Use this with
Stakeholders
Moments
- ·Component library audit
- ·Design review for CJK or SEA launch
- ·Adding a new column or sidebar to a layout
Field note
Japanese typography has had formal line-breaking rules (kinsoku shori) since long before the web. JIS X 4051 standardizes them, and W3C's Japanese layout requirements summarize them for the web. A period (。) or small kana at the start of a line reads as sloppy print. CSS line-break: strict exists to enforce this.
Quick check
3 questions · pass at 2+
Question 1/3
What do Japanese kinsoku shori rules forbid?
Question 2/3
How does a browser find line-break opportunities in Thai text?
Question 3/3
Your layout breaks because one long URL will not wrap. What is the right CSS fix?