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.


It specifies how words should break at the end of the line. It defines the line break rules.


The default value of this property is normal. So, this value is automatically used when we don't specify any value.


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.


Test it Now


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.



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.


Test it Now


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.


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.


Test it Now


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).


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.


Test it Now

Next TopicCSS text-align

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA