CSS Text Effects
CSS is all about presentation. Discover how CSS Text Effects works to transform plain HTML into a premium user experience in the guide below.
We have the ability to implement various styles on the text present in an HTML file. Certain attributes are available for applying these styles to the text content.
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 explore the aforementioned CSS attributes with visual representations.
word-break
It dictates the appropriate way to divide words at the line's conclusion, establishing guidelines for line breaking.
Syntax
word-break: normal |keep-all | break-all | inherit ;
The default setting for this attribute is standard. Therefore, this setting is applied automatically in the absence of a specified value.
Values
It divides the word according to the default formatting.
It uses the 'break-all' property to insert a line break between each character, helping to avoid overflow of the word.
Example
<!DOCTYPE html>
<html>
<head>
<title>word-break: break-all</title>
<style>
.jtp{
width: 150px;
border: 2px solid black;
word-break: break-all;
text-align: left;
font-size: 25px;
color: blue;
}
.jtp1{
width: 156px;
border: 2px solid black;
word-break: keep-all;
text-align: left;
font-size: 25px;
color: blue;
}
</style>
</head>
<center>
<body>
<h2>word-break: break-all;</h2>
<p class="jtp">
Welcome to the C# Tutorial
</p>
<h2>word-break: keep-all;</h2>
<p class="jtp1">
Welcome to the C# Tutorial
</p>
</center>
</body>
</html>
word-wrap
The CSS word-wrap attribute is employed to split lengthy words and move them to the following line. It is utilized to avoid overflowing when an unbreakable string is excessively lengthy to be accommodated within the container.
Syntax
word-wrap: normal| break-word| inherit ;
Values
Rewritten: This attribute is utilized to separate words exclusively at designated breaking points.
The break-word property is employed to allow long, unbreakable words to break and wrap onto the next line within a container.
It is utilized to restore this property to its default value.
It acquires this attribute from its ancestor element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.test {
width: 200px;
background-color: lightblue;
border: 2px solid black;
padding:10px;
font-size: 20px;
}
.test1 {
width: 11em;
background-color: lightblue;
border: 2px solid black;
padding:10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> Without Using word-wrap </h1>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. </p>
<h1> Using word-wrap: break-word; </h1>
<p class="test1"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>
</center>
</body>
</html>
text-overflow
It defines how text that exceeds its container's boundaries is displayed, remaining hidden from the user's view. It alerts the user to content that extends beyond the visible area. This feature assists in determining whether the text should be truncated or displayed with ellipsis dots.
This attribute is not effective independently. To make it function properly, white-space: nowrap; and overflow: hidden; must be applied in conjunction with this attribute.
Syntax
text-overflow: clip | ellipsis;
Property Values
The clip property serves as the default value that truncates the overflowing text.
This option presents an ellipsis (…) or three dots to indicate truncated text, appearing within the designated space and reducing the displayed text length.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.jtp{
white-space: nowrap;
height: 30px;
width: 250px;
overflow: hidden;
border: 2px solid black;
font-size: 25px;
text-overflow: clip;
}
.jtp1 {
white-space: nowrap;
height: 30px;
width: 250px;
overflow: hidden;
border: 2px solid black;
font-size: 25px;
text-overflow: ellipsis;
}
h2{
color: blue;
}
div:hover {
overflow: visible;
}
p{
font-size: 25px;
font-weight: bold;
color: red;
}
</style>
</head>
<center>
<body>
<p> Hover over the bordered text to see the full content. </p>
<h2>
text-overflow: clip;
</h2>
<div class="jtp">
Welcome to the C# Tutorial
</div>
<h2>
text-overflow: ellipsis;
</h2>
<div class="jtp1">
Welcome to the C# Tutorial
</div>
</center>
</body>
</html>
writing-mode
It indicates the orientation for text placement, either horizontal or vertical. In vertical alignment, the text can flow from left to right (vertical-lr) or from right to left (vertical-rl).
Syntax
writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ;
Property values
By default, the value of this property is set to horizontal-tb, indicating that the text flows horizontally from left to right and from top to bottom.
vertical-rl: It presents the text vertically, with the reading direction going from right to left and from top to bottom.
vertical-lr: This orientation is akin to vertical-rl, with the difference being that the text flows from left to right.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 2px solid black;
width: 300px;
height: 100px;
}
#tb {
writing-mode: horizontal-tb;
}
#lr {
writing-mode: vertical-lr;
}
#rl {
writing-mode: vertical-rl;
}
</style>
</head>
<center>
<body>
<h1> Example of CSS writing-mode property </h1>
<h2 id="tb"> writing-mode: horizontal-tb; </h2>
<h2 id="lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br>
<h2 id="rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2>
</center>
</body>
</html>
