Chapter 10·Scripts and layout·~7 min
Line breaking across writing systems
Latin scripts wrap at spaces. CJK wraps almost anywhere; Thai and Khmer wrap by dictionary. CSS line-break, word-break, and Intl.Segmenter carry the rules; English-only QA never exercises them.
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 has no spaces to wrap at, so the browser finds word boundaries with a built-in dictionary, and a stylesheet that forces word-break: break-all to tame overflow overrides that dictionary and cuts Thai words mid-syllable. A long German compound in a narrow column overflows or breaks arbitrarily when no wrap policy is set.
How it works
Where a line can 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: application 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 exercises each one at an adjustable width.
The demo
Try these, in order
Each step reproduces one specific failure in the demo below.
- 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 hyphenation is allowed. 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 the modes. line-break: strict respects kinsoku rules in CJK; overflow-wrap: anywhere keeps the long URL inside the container, and unlike break-word it also compresses under flex and grid min-content sizing.
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.
The short version
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. - Use
word-break: keep-allfor Korean so words do not break mid-word. Thai, Burmese, Khmer, and Lao wrap by the browser's ICU-backed dictionary on their own; for an engine without one, pre-segment withIntl.Segmenterand insert zero-width spaces at the boundaries. - 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, the narrowest common device class.
Where this comes up
Who it concerns
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, and CSS line-break: strict exists to enforce that.