white-space

The white-space property

white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line
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: normal
white-space: nowrap
white-space: pre-line
white-space: pre
white-space: pre-wrap
white-space: break-spaces

White-space — Phase II

White-space — End of Line

white-space on Inlines

<p>Let's learn about the <code>white-space</code> property
p { white-space: normal; }
code { white-space: nowrap; }
Let's learn about the white-space property.

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

Dealing with overflow

Overflow Wrapping

overflow-wrap: normal | break-word | anywhere
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; }
abcde123456789
td { width: 5ch; overflow-wrap: anywhere; }
abcde12345
6789

Controlling Wrapping Opportunities

The hyphens property

hyphens: manual | none | auto

Turning on Hyphenation

Use hyphens: manual with &shy;.
super&shy;cali&shy;fragil&shy;istic&shy;expi&shy;ali&shy;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.
Use lang="…", browsers won’t hyphenate if you don’t.

The word-break Property

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

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 

Line Breaking Strictness

loose
割引キャンペーン
:2019年9〜
10月
normal
割引キャンペー
ン:2019年9
〜10月
strict
割引キャンペー
ン:2019年
9〜10月

Magic?

English wraps at spaces.
す。

How???

Unicode!

NameCategoryBehavior
“A”U+0041AL (Alphabetic)no wrapping
“ ”U+0020SP (Space)wrap after OK
English wraps at spaces.
NameCategoryBehavior
“日”U+65E5ID
(Ideographic)
wrap before and after OK
“、”U+3001CL
(Close Punctuation)
keep with previous character
す。

Unicode Variations

3 cats← U+0020 (SPACE)
3 pm ← U+00A0 (NO-BREAK SPACE) aka &nbsp;
Loremipsum← U+2009 (THIN SPACE)
§3.2← U+202F (NARROW NO-BREAK SPACE)
Front‐end← U+2010 (HYPHEN)
e‑mail← U+2011 (NON-BREAKING HYPHEN)

More Examples

line-break: anywhere;
white-space: break-spaces;
xterm - vibash
[~/src/csswg-drafts/css-text-3/] $
[~/src/csswg-drafts/css-text-3/] $ vi Ov erview.bs
2 <pre class="propdef"> 1 Name: line-break 0 Value: auto | loose | normal | strict | anywhere 1 Initial: auto 2 Applies to: <a>inline boxes</a> 3 Inherited: yes 4 Canonical order: n/a 5 Computed value: specified keyword 6 Animation type: discrete 7 </pre> 1124,41 35%

Japanese Titles

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

word-break: normal
ナウシカ
word-break: keep-all
ナウシカ

Tricky case

Atomic inlines

Symbol for radiation warning
Wrapping opportunity before and after
Lorem ipsumatomic inlinedolor.
Even if there are &nbsp;
Lorem ipsum&nbsp;atomic inline&nbsp;dolor.

The Problem

external link
external link
external link&nbsp;
😡

The Solution(?)

img { wrap-before: avoid; }
external link
😡
<a>external link</a><span> <img></span>
span { white-space: nowrap; }
external link
🙄

Compatibility

Here be dragons…

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

😢#1:break-spaces support

FirefoxChromeSafariEdgeHTML
from v69from v76from tp80⛔️

😢#2:End of line spaces with pre-wrap

FirefoxChromeSafariEdgeHTML
✂️ Truncate🌊 from v76✂️ Truncate🌊 Overflow
overflow-wrap: normal | break-word | anywhere

😢#1:legacy name word-wrap

FirefoxChromeSafariEdgeHTML
😀 (both names)word-wrap only

😢#2:partial support for anywhere

FirefoxChromeSafariEdgeHTML
😀 since v65word-break: break-word⛔️
hyphens: manual | none | auto
FirefoxChromeSafariEdgeHTML
😀hyphens: auto only supported on macOS and Android-webkit-hyphens-ms-hyphens
word-break: normal | break-all | keep-all
    FirefoxChromeSafariEdgeHTML
break-all😀 since v67😀affects punctuation😀
keep-allaffects punctuation
line-break: auto | loose | normal | strict | anywhere 
FirefoxChromeSafariEdgeHTML
autofrom v69😀
loose
normal
strict
anywherefrom v76 with flagfrom tp83⛔️
@supports not (line-break: anywhere) { p { word-break: break-all; } }
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