Something about typesetting in CSS Back
In the case when we need to present some text in a site, typesetting is a problem we may need when coding with CSS. In general, all the following attributes can affect the position of text, like
word-wrap, etc. This article mainly aims to figure out how they work, and how to set them in some situations.
1. Letter Spacing
letter-spacing is used to set the distance between each character in a string. It applies to the element itself, and also pseudo elements like
::first-letter. Its initial value is
normal, which means that there is no distance between each character.
letter-spacing: normal; letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; letter-spacing: inherit;
2. Keeping in Line
When a container has too much texts, resulting in multiple lines to present such contents, we can use a attribute named
white-space to decide whether to keep it in a single line. If keep it, then set it with
white-space: normal white-space: nowrap white-space: pre white-space: pre-wrap white-space: pre-line white-space: inherit
normalmeans that a series of white spaces will be merged into one, including the line-break character. At the same time, break contents into another line automatically if necessary.
nowrapmeans to merge white spaces but not to break into another line.
premeans that keep a series of white spaces and break into anther line if there is a line-break character or a
pre-wrapmeans that keep white spaces and break into another line in three cases: a line-break character, a
<br>element, or necessary to break
pre-linemeans to merge white spaces, and break into another line in three cases as the same as the previous one.
In order to enhance it, there is a table to show the differences between those values:
|Line-break characters||White Spaces||Breaking into new lines automatically|
3. Word Wrapping
Word wrapping means whether to break a word into another line when this word is too long to fill in the container. If we want to break, we can set the attribute
word-wrap is the original private attribute of Microsoft, and it has been renamed as
overflow-wrap in CSS3.
Another attribute named
word-break is used to specify how to break this word if it is too long to fill in. If we set it with
break-all, the browser is allowed to break any character of CJK (Chinese/Japanese/Korean) contents into a new line. And if we set it with
kee-all, the browser is not allowed to break any character of CJK contents.