CSS Text Effect
The CSS offers multiple effects properties that we can use to style the text. These CSS text-effect properties are very useful and also make the text stylish and more attractive. Some of the CSS text effect properties along with its description are given below:
- text-overflow
- word-break
- word-wrap
- writing-mode
CSS text-overflow
The text-overflow property deals with the representation of the text that is overflowed. Generally, the text that is overflowed from a container is displayed to the user out of that container element and overlaps the content of the element that is next to it. But with the help of the CSS text-overflow property, we can hide the overflowed text and also signals the user about the hidden text.
This property has two values:
- clip - It is the default value that trims the overflowed text.
- ellipsis - This value displays the ellipsis (...) at the place of trimmed/clipped text.
Syntax of CSS text-effect
The syntax of the CSS text-overflow property is given below:
text-overflow: clip | ellipsis;
Example: Applying text-effect property
In the given example, we have created two paragraphs and wrap them in a rectangular box having a width of 200px. Then, we have applied two different values of the property text-overflow for each paragraph. In the first paragraph, the overflowed text is trimmed by specifying the value of the property text-overflow to clip, and in the second paragraph, we have specified the value ellipsis.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Effect</title>
<style>
p.p1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.p2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph with CSS property text-overflow and value clip.</p>
<p class="p2">This is a paragraph with CSS property text-overflow and value ellipsis.</p>
</body>
</html>
Output:
CSS word-break
The CSS word-break property determines the rules for how words should break at the end of the line. The default value of word-break is normal which is used automatically when the user has not assigned any value for it. Apart from that, it has some more values to add effect when the line breaks, these are given below:
- keep-all - This value breaks the line after a complete word.
- break-all - This value will break the line at any character of the word without using any special character.
Syntax of CSS word-break property
The syntax of the word-break property is given below:
word-break: normal |keep-all | break-all | inherit ;
Example: Applying CSS word-break property
In this example, we have demonstrated how the keep-all and break-all value works.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Effect</title>
<style>
p.p1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.p2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<p class="p1">This is a pargraph with some text. This line will break at hyphens.</p>
<p class="p2">This is a paragraph with some text. The lines will break at any character.</p>
</body>
</html>
Output:
CSS writing-mode
The CSS writing-mode property specifies whether the text should be placed horizontally or vertically. This property comes with three different values horizontal-tb, vertical-rl, and vertical-lr.
Syntax of CSS writing-mode property
The syntax of the writing-mode property is given below:
writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ;
This description of the values are given below:
- horizontal-tb: It is the default value of this property. This value shifts the text 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 : Applying CSS writing-mode property
In the given example, we have created three paragraphs using the <p> tag. In the first paragraph, we have specified the value of the writing-mode property to horizontal-tb, for the second we specified writing-mode: vertical-lr, and the third with writing-mode: vertical-rl.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Effect</title>
<style>
p.p1 {
writing-mode: horizontal-tb;
}
span.p2 {
writing-mode: vertical-lr;
}
p.p2 {
writing-mode: vertical-rl;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph with default writing-mode.</p>
<p>This is a paragraph with <span class="p2">vertical-rl</span> writing-mode.</p>
<p class="p2">This is a paragraph with writing-mode: vertical-rl.</p>
</body>
</html>
Output:
CSS word-wrap
CSS word-wrap property allows us to wrap long words into the next line without breaking them into two or more words. This property avoids word overflow when a string is too long to fit in a container box.
This property comes with multiple values, these are normal, break-word, initial, and inherit.
Syntax of CSS word-wrap property
The syntax of the word-wrap property is given below:
word-wrap: normal| break-word | initial | inherit ;
Example : Applying CSS word-wrap property
In the given example, we have created a paragraph using the <p> element which is consists of a very long word. Basically, this long word does not fit in the container and overflowed but by using the CSS word-wrap property this long word wraps in the next line.
Conclusion
In this lesson, we have learned how to add text effects to the text within a webpage. Also, we have learned some CSS properties which is used to add special effect to the text. These properties are given below:
- text-overflow
- word-break
- word-wrap
- writing-mode
