How to use Text Effects in CSS?

Web Development
,
#1

CSS is the mechanism for adding style to various web documents. Text Effects allows us to apply different types of effects on the text used in an HTML document.

Below are some of the properties in CSS that can be used to add effects to text:

Text-Overflow: The CSS Text overflow property is a way to limit text that exceeds the width of it’s parent. It helps to specify the way to represent the portion of overflowing text which is not visible to the user.

Syntax:

element {


    text-overflow: clip | ellipsis;


    //CSS Property


}

Word wrap: The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its parent container. If a word is too long to fit within an area, it expands outside:

Syntax:

element {

    word-wrap: break-word;

    //CSS Property


}

Word breaking: The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. It specifies line breaking rules.

Syntax:

element {

    word-break: keep-all | break-all;

    //CSS Property

}

Writing mode: The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Syntax:

element {

    writing-mode: horizontal-tb | vertical-rl;

    //CSS Property

}