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 white-space
, work-break
, or word-wrap
, etc. This article mainly aims to figure out how they work, and how to set them in some situations.
1. Letter Spacing
The attribute 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-line
and ::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 nowrap
:
white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: inherit
normal
means 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.nowrap
means to merge white spaces but not to break into another line.pre
means that keep a series of white spaces and break into anther line if there is a line-break character or a<br>
element.pre-wrap
means that keep white spaces and break into another line in three cases: a line-break character, a<br>
element, or necessary to breakpre-line
means 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 | |
---|---|---|---|
normal |
merged | merged | yes |
nowrap |
merged | merged | no |
pre |
keeped | keeped | no |
pre-wrap |
keeped | keeped | yes |
pre-line |
keeped | merged | yes |
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
or overflow-wrap
with break-word
. 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.
See the Pen Word Breaking by aleen42 (@aleen42) on CodePen.