CSS Text Effects
We can apply different effects on the text used within an HTML document. Some properties can be used for adding the effects on text.
Using CSS, we can style the web documents and affects the text. The properties of the text effect help us to make the text attractive and clear. There are some text effect properties in CSS that are listed below:
- word-break
- text-overflow
- word-wrap
- writing-mode
Let’s discuss the above CSS properties along with illustrations.
word-break
It specifies how words should break at the end of the line. It defines the line break rules.
Syntax
The default value of this property is normal. So, this value is automatically used when we don’t specify any value.
Values
keep-all: It breaks the word in the default style.
break-all: It inserts the word break between the characters in order to prevent the word overflow.
Example
word-wrap
CSS word-wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
Syntax
Values
normal: This property is used to break words only at allowed break points.
break-word: It is used to break unbreakable words.
initial: It is used to set this property to its default value.
inherit: It inherits this property from its parent element.
Example
text-overflow
It specifies the representation of overflowed text, which is not visible to the user. It signals the user about the content that is not visible. This property helps us to decide whether the text should be clipped or show some dots (ellipsis).
This property does not work on its own. We have to use white-space: nowrap; and overflow: hidden; with this property.
Syntax
Property Values
clip: It is the default value that clips the overflowed text.
ellipsis: This value displays an ellipsis (…) or three dots to show the clipped text. It is displayed within the area, decreasing the amount of text.
Example
writing-mode
It specifies whether the text will be written in the horizontal or vertical direction. If the writing direction is vertical, then it can be from left to right (vertical-lr) or from right to left (vertical-rl).
Syntax
Property values
horizontal-tb: It is the default value of this property in which the text is in the horizontal direction and read from left to right and top to bottom.
vertical-rl: It displays the text in the vertical direction, and the text is read from right to left and top to bottom.
vertical-lr: It is similar to vertical-rl, but the text is read from left to right.
Example