Besides the concepts we have discussed so far, there are still some miscellaneous key points about typography we must talk about.
White space
As you know, by default, the browser will automatically remove extra white spaces when rendering texts.
It is possible to change that behavior by setting the white-space property, which accepts the following input options:
- When set to
normal, the default condition, the browser will collapse all extra white spaces, and the text will wrap when necessary (automatically change to the next line when there is insufficient space). Line breaks are also considered white spaces. - When set to
nowrap, the browser will not automatically wrap the texts. - When set to
pre, all white spaces will be preserved, and texts will not wrap automatically. - When set to
pre-wrap, all white spaces will be preserved, and texts will wrap automatically. - When set to
pre-line, sequences of white spaces (multiple spaces, tabs) will collapse into one, but line-breaks will be preserved, and texts will wrap automatically.
Word break
The word-break property defines what happens when a word is too long to fit inside its content box.
- When set to
normal, the word will ignore the defined size, and extend beyond the content box. - When set to
break-all, the word will wrap to fit inside the content box.
Hyphens
By default, hyphens are suggested manually using the HTML entity ­.
1<p>
2 Lorem ipsum dolor sit amet con­sectetur, adipisicing elit. Fugiat,
3 repre­henderit?
4</p>When the content box is too small, the word will be broken based on the suggested hyphen.
You can also let the browser choose a hyphen automatically by setting the hyphen property to auto. Or remove all hyphens and let the word break out of the content box by setting hyphen to none.