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:
text-overflow: clip | ellipsis;
The below example show the difference between “clip” and “ellipsis” value.
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.
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”.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok