• line-break
• word-break
• break-word
• break-all
• break-spaces
• word-wrap
• overflow-wrap
• nowrap
• pre-wrap
• pre-line
• loose
• anywhere

white-space

The white-space property

white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line

• Collapses sequences of spaces (or not)
• Preserves tabs and line feeds (or not)
• Allows lines to wrap (or not)
• Decides what happens to end-of-line spaces
• Applies to any element, not just blocks
  

white-space: normal

<p>Lorem ipsum.  Dolor
   sit amet.<br>consectetur

Lorem ipsum.  Dolor   sit amet.consectetur

Lorem ipsum.  Dolorsit amet.consectetur

Lorem ipsum.  Dolor sit amet.consectetur 

Lorem ipsum. Dolor sit amet.consectetur 

Lorem ipsum. Dolor sit amet.consectetur 

Lorem ipsum. Dolor sit
amet.
consectetur

White-space — Phase I

White-space — Phase II

•  Collapsible spaces at the start of a line are removed
•  Preserved tabs shift content to the next tab stop
•  Preserved line feeds push content to the next line
•  Wrap the line at a wrap opportunity if more won't fit

White-space — End of Line

•  Collapsible spaces at the end of a line are removed
•  white-space:pre spaces stay, overflowing if too long
•  white-space:pre-wrap spaces stay, may get trimmed if overflowing
•  white-space:break-spaces spaces stay, wrap if too long

white-space on Inlines

<p>Let's learn about the <code>white-space</code> property

p { white-space: normal; }

code { white-space: nowrap; }

Poetry

<style>p { white-space: pre-line; }</style>
<p lang="qbs">¬A#5,Ex26Yw1Ej^zNY= A#5,ExxwP%1Ej^=
	A#5,Ex37zE1Ej^zNY X#w6Ykt^A%`Bz7qpT1Ej^¬</p>

¬A#5,Ex26Yw1Ej^zNY= A#5,ExxwP%1Ej^= A#5,Ex37zE1Ej^zNY X#w6Ykt^A%`Bz7qpT1Ej^¬

@media one-ring {
	p { white-space: nowrap; }
}

Editable elements

• Space collapsing clashes with editing
• white-space: normal → hodge podge of spaces and  
• <textarea> defaults to white-space: pre-wrap
• pre-wrap or break-spaces

Dealing with overflow

Overflow Wrapping

overflow-wrap: normal | break-word | anywhere

• Decides what to do when things don't fit after normal wrapping
• Only works if white-space allows wrapping
• Applies to any element, not just blocks
  

overflow-wrap: anywhere

The commit id you’re looking for is 2236e39887e6911ed816ea1cb1a67c49

The commit id you’re looking
looking for is 2236e39887e6911ed816ea1cb1a67c49
2236e39887e6911ed816ea1cb1a67c49
1cb1a67c49

Intrinsic sizing

overflow-wrap: anywhere affects intrinsic sizing.

overflow-wrap: break-word does not.

td { width: 5ch; overflow-wrap: break-word; }

td { width: 5ch; overflow-wrap: anywhere; }

Controlling Wrapping Opportunities

The hyphens property

hyphens: manual | none | auto

• Enables additional wrapping opportunities
• Inserts hyphens where it wraps
• Only works if white-space allows wrapping
• Applies to any element, not just blocks
  

Turning on Hyphenation

Use hyphens: manual with ­.

super­cali­fragil­istic­expi­ali­docious

super­cali­fragil­istic­expi­ali­docious

Use hyphens: auto with lang="…".

A case of inc-
orrect hyp-
henation may inc-
rease the diff-
iculty of the te-
xt or even alt-
er the me-
aning.

The word-break Property

word-break: normal | break-all | keep-all

• Determines whether breaks are allowed inside words.
• word-break: break-all takes precedence over hyphens.
• Only works if white-space allows wrapping.
• Applies to any element, not just blocks.

Word Breaking in Various Languages

English wraps at spaces.

日本語は、字の間に改行を許す。

이것은한국어문장입니다.

이것은 한국어 문장 입니다.

이것은 한국어 문장 입니다.

CJK in Latin text

word-break: normal

You should visit Nijo Castle (二
条城) when in Kyoto.

word-break: keep-all

You should visit Nijo Castle
(二条城) when in Kyoto.

Latin in CJK text

word-break: normal

美しい組版は
CSSで出きる。

word-break: break-all

美しい組版はCS
Sで出きる。

The line-break property

line-break: auto | loose | normal | strict | anywhere 

• Mostly about punctuation in CJK
• Also has the “break anywhere” mode
• Sensitive to the lang attribute
• Only works if white-space allows wrapping.
• Applies to any element, not just blocks
  

Line Breaking Strictness

loose

割引キャンペーン
：２０１９年９〜
１０月

normal

割引キャンペー
ン：２０１９年９
〜１０月

strict

割引キャンペー
ン：２０１９年
９〜１０月

Magic?

English wraps at spaces.

日本語は、字の間に改行を許す。

How???

Unicode!

• More than a list of code points and corresponding characters
• Group characters into categories
• Defines per-category behavior
• Line breaking behavior defined in UAX 14

English wraps at spaces.

日本語は、字の間に改行を許す。

Unicode Variations

More Examples

line-break: anywhere;
white-space: break-spaces;

Japanese Titles

<h1>風の谷の<wbr>ナウシカ</h1> or U+200B (ZERO WIDTH SPACE)

Tricky case

Atomic inlines

• buttons, checkboxes…
• images, video, canvas…
• display: inline-block

Lorem ipsumdolor.

Lorem ipsum  dolor.

The Problem

external link

external link

external link 

The Solution(?)

img { wrap-before: avoid; }

external link

<a>external link</a><span> <img></span>

span { white-space: nowrap; }

external link

white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line

overflow-wrap: normal | break-word | anywhere

hyphens: manual | none | auto

word-break: normal | break-all | keep-all

line-break: auto | loose | normal | strict | anywhere 

@supports not (line-break: anywhere) { p { word-break: break-all; } }

• line-break
• word-break
• break-word
• break-all
• break-spaces
• word-wrap
• overflow-wrap
• nowrap
• pre-wrap
• pre-line
• loose
• anywhere

white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line

overflow-wrap: normal | break-word | anywhere

hyphens: manual | none | auto

word-break: normal | break-all | keep-all | break-word

line-break: auto | loose | normal | strict | anywhere