CSS Text Effects allows us to apply different types of effects on the text used in an HTML document.
The following are some CSS text effects properties which used to add effects on the text.
- text-overflow
- word-wrap
- word-break
- writing-mode
Text-Overflow
The text-overflow CSS property is used to limit text that exceeds the width of its parent. It helps to specify the way to represent the portion of overflowing text which is not visible to the user.
This property has two values clip and ellipsis. Clip text as appropriate for the text content. Characters may be only partially rendered. The “ellipsis” keyword will display an ellipsis (‘…’) to represent clipped text.
The syntax of the property is given below:
The below example show the difference between “clip” and “ellipsis” value.
Word-Wrap
The CSS word-wrap property specifies the line breaks within the word in order to prevent the overflow when a word is too long to fit within the content area of the element.
Word-break
The CSS word-break property is used to specify how (or if) to break lines within words. It specifies line breaking rules. It has two values “keep-all” and “break-all”.
Writing-mode
The writing-mode CSS property specifies whether lines of text are laid out horizontally or vertically. This property has two values “horizontal-tb” and “vertical-rl”.
The horizontal-tb is the default value of the property i.e text is read from left to right and top to bottom. The next horizontal line is placed below the previous line.
In vertical-rl property value the text is read from right to left and top to bottom. The next vertical line is placed to the left of the previous line.