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.

Japanese Titles

<h1>風の谷の<wbr>ナウシカ</h1>
word-break: normal
ナウシカ
word-break: keep-all
ナウシカ

The line-break property

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

Line Breaking Strictness

loose
割引キャンペーン
:2018年9〜
10月
normal
割引キャンペー
ン:2018年9
〜10月
strict
割引キャンペー
ン:2018年
9〜10月
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%

Compatibility

Here be dragons…

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

😢#1:break-spaces support

FirefoxEdgeChromeSafari
⛔️⛔️Coming Soon⛔️

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

FirefoxEdgeChromeSafari
🌊 Overflow✂️ Truncate
overflow-wrap: normal | break-word | anywhere

😢#1:legacy name word-wrap

FirefoxEdgeChromeSafari
both from v49word-wrap onlyboth from v23both from v6.1

😢#2:no support yet for anywhere

FirefoxEdgeChromeSafari
Coming soon😭word-break: break-word
hyphens: manual | none | auto
FirefoxEdgeChromeSafari
😀-ms-hyphenshyphens: auto only supported on macOS and Android-webkit-hyphens
word-break: normal | break-all | keep-all
FirefoxEdgeChromeSafari
affects punctuation😀😀affects punctuation
line-break: auto | loose | normal | strict | anywhere 

😢#1:no support yet for line-break: anywhere

use word-break: break-all?

Support for line-break: auto | loose | normal | strict

FirefoxEdgeChromeSafari
😭😀
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