Introduction to CSS Text Effects
Many properties of CSS text effects help to provide various styling in the words of a sentence in an HTML page with CSS.So that words will get the various pattern, orientations, and designs by using various text effects of the CSS. Utilizing its various values of the parameters to get a better design of the web page which is as per the required design in a web page development. In this article, we will demonstrate the techniques that a web page designer can apply to the text of an HTML page by using CSS text effects property with many examples.
Examples of CSS Text Effects
Following are the examples as given below:
Example #1 – Writing Mode Property
In the first example, we will demonstrate the writing-mode property. This specifies the orientation of text whether it is vertical or horizontal. In this example, we have demonstrated horizontal writing mode which is a horizontal layout from left to right.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.wMH {
writing-mode: horizontal-tb;
font-size: 23px;
}
</style>
</head>
<body style = "text-align: auto;">
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<h2>Example of writing mode is horizontal</h2>
<p class="wMH">
this is an illustration of horizontal writing mode
</p>
</body>
</html>Output:
Example #2 – Vertical Writing Mode
Here, we will demonstrate another writing mode property. This specifies the orientation of text whether it is vertical or horizontal. In this example, we have demonstrated vertical writing mode. Vertical writing mode is rarely used, but still a very handy tool in case of any requirement like this.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 23px;
}
span.wMH {
writing-mode: vertical-rl;
font-size: 23px;
}
</style>
</head>
<body style = "text-align: auto;">
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<h2>Example of writing mode is vertical</h2>
<p>
this is an illustration of <span class="wMH">vertical </span> writing mode
</p>
</body>
</html>Output:
Example #3 – Work Break Property
In this example, we will show you a demonstration of work break property. This property will indicate whether to break the word in a sentence to keep it within the borderline area or not. In this case, we have shown “break all” property where the word is broken into parts to contain it within the boundary line. It is useful to keep words within the border.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.brkAll {
width: 50px;
border: 3px solid black;
word-break: break-all;
text-align: left;
font-size: 23px;
}
</style>
</head>
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<body style= "text-align: auto;">
<h2>Example of Text effect property: break-all</h2>
<p class="brkAll">
Illustration of break all property
</p>
</body>
</html>Output:
Example #4 – Keep all Work Break Property
In this case, we will show another demonstration of work break property. This property will indicate whether to break the word in as sentence to keep it within the borderline area or not. In this case, we have shown “keep all” property where the word is flown out of the boundary line.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.keepAll {
width: 50px;
border: 3px solid black;
word-break: keep-all;
text-align: left;
font-size: 23px;
}
</style>
</head>
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<body style= "text-align: auto;">
<h2>Example of Text effect property: keep-all</h2>
<p class="keepAll">
Illustration of keep all property
</p>
</body>
</html>Output:
Example #5 – Clip Text Overflow Property
In this example, we will show you a demonstration of text overflow property. This property will specify whether the word will be in a limited area or not. In this case, we have shown “clip” property where the word is cut beyond its boundary line. If we hover the mouse in the area you will see the whole text as the code is written like this for visibility.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.txtOf {
white-space: nowrap;
width: 250px;
overflow: hidden;
border: 3px solid black;
font-size: 23px;
text-overflow: clip;
}
div.txtOf:hover {
overflow: visible;
}
</style>
</head>
<body style = "text-align: auto">
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<h2>
Example of Text effect property: text-overflow: clip
</h2>
<div class="txtOf">
This is an example of clip property of text-overflow
</div>
</body>
</html>Output:
Example #6 – Ellipsis Text Overflow Property
In this example, we will show another demonstration of text overflow property. This property will specify whether the word will be in a limited area or not. In this case, we have shown “ellipsis” property where ellipsis will be present before the cut to indicate that there is a continuation of the sentence. We can see the whole text if hover the mouse on the text.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.txtOf {
white-space: nowrap;
width: 250px;
overflow: hidden;
border: 3px solid black;
font-size: 23px;
text-overflow: ellipsis;
}
div.txtOf:hover {
overflow: visible;
}
</style>
</head>
<body style = "text-align: auto">
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<h2>
Example of Text effect property: text-overflow
</h2>
<div class="txtOf">
This is an example of ellipsis property of text-overflow
</div>
</body>
</html>Output:
Example #7 – Word Wrap Property
In this example, we will show you a demonstration of word wrap property. Word wrap will limit the whole text within its area to prevent overflow. If you see the output, you can understand how words will overflow if we do not put word wrap on it.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 50px;
overflow: hidden;
border: 3px solid black;
text-align: left;
font-size: 23px;
}
p.Wrp {
word-wrap: break-word;
}
</style>
</head>
<body style = "text-align: auto;">
<h1 style = "color:blue">
Text Effects in CSS
</h1>
<h2>
Example of Text effect property: word wrap
</h2>
<h3>Without word-wrap</h3>
<p>
Illustration of word wrap property
</p>
<h3>With word-wrap</h3>
<p class="Wrp">
Illustration of word wrap property
</p>
</body>
</html>Output:
Conclusion
Learning of “CSS Text Effects” gets a finish here. During this article, we’ve provided you with several examples on the ways you’ll follow to use the values of text effects property within the CSS code of hypertext mark-up language page. This text is going to be very helpful for web designers who are involved in front end development and design with hypertext mark-up language with CSS.
Recommended Articles
This is a guide to CSS Text Effects. Here we also discuss the definition of CSS text effects along with different examples and its code implementation. You may also have a look at the following articles to learn more –
