Javatpoint Logo
Javatpoint Logo

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

Test it Now

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

Test it Now

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

Test it Now

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

Test it Now

Next TopicCSS text-align




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA