Text Effects in CSS

We can use distinct text effects used inside the HTML document. Few attributes can be applied to insert the text effects.

We can also style various web documents that will affect distinct text with the help of CSS. The text effect properties support us in designing the text clear and attractive. We are listing some essential CSS text effect properties below:

  • word-wrap
  • word-break
  • text-overflow
  • writing-mode

Let’s explain the above properties one by one, along with an example.

word-wrap

It is applied for breaking any lengthy word and, after that, wrap towards any next line. The word-wrap attribute can be used to avoid the overflow if any unbreakable word is too lengthy to fit within any containing box.

Syntax:

Property Values

normal: It is applied to break the words at permitted breakpoints only.

break-word: This property of CSS is applied to break distinct unbreakable words.

initial: It sets this attribute to the default value.

inherit: It is used to acquire this attribute by its parent component.

Example:

Output:

CSS Text Effects

word-break

This CSS property describes how words must break at any line’s end. The rules of line break can be defined using this property.

Syntax:

Note: The normal value is its default value. Thus, it will automatically apply when we do not define the value.

Property Values

keep-all: This value is used to break any word to its default style.

break-all: This property value adds any word break among many characters to avoid any kind of word overflow.

Example:

Output:

CSS Text Effects

text-overflow

It describes the illustration of overflowed content, which is invisible to any user. This CSS property indicates the user regarding the text that is invisible. It supports us to determine whether the content must be cut or display few dots (ellipsis).

Note: It does not apply by its own. We need to apply overflow: hidden; and white-space: nowrap; along with this attribute.

Syntax:

Property Values

clip: This value is a default value. It is sued to clip the overflowed content.

ellipsis: It shows three dots (…) or ellipsis to display the clipped content. This value is shown inside the area, reducing the txt amount.

Example:

Output:

CSS Text Effects

writing-mode

This property describes that the content will be specified either in vertical or horizontal direction. If the specified direction is horizontal, then it will be from right to left (vertical-rl) or from left to right (vertical-lr).

Syntax:

Property Values

horizontal-tb: This property value is used as default value for this property, where the content will be in the horizontal direction. It will be consider from top to bottom and left to right.

vertical-rl: This value is used to show the content in vertical direction. The content will be consider from top to bottom and right to left.

vertical-lr: This value is same as the vertical-rl, although the content will be consider from the left side to the right side.

Example:

Output:

CSS Text Effects

Pin It on Pinterest

Share This