CSS Text Effect

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.


Word break

This property defines the line break rules i.e specifies how words should break at the end of the line.

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

PropertyDescription
keep-allIt breaks the word in the default style
Break-allIt inserts the word break between the characters in order to prevent the word overflow
Input:-

Index.html
	
<body>   
    <p class="wordBreak">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p> 
</body>
Style.css
.wordBreak {  
    word-break: break-all;
}

Output:-


Word wrap

This property is used to break the long words and wrap onto the next line. Also used to prevent overflow when an unbreakable string is too long to fit in the containing box.

PropertyDescription
NormalThis property is used to break words only at allowed break points
break-wordIt is used to break unbreakable words
initialIt is used to set this property to its default value
inheritIt inherits this property from its parent element.
Input:-

Index.html
	
<body>   
    <p class="wordBreak">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, contenttttttttttttttttttttggggggggggggggggggeeeeeeeeeee here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p> 
</body>
Style.css
.wordBreak {  
    width: 11em;
    background-color: lightblue;
    border: 2px solid black;
    padding: 10px;
    word-wrap: break-word;
    font-size: 20px;
}

Output:-


Text overflow

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

We have to use white-space: nowrap; and overflow: hidden; also with this.

PropertyDescription
ClipIt is the default value that clips the overflowed text.
EllipsisThis value displays an ellipsis (…) or three dots to show the clipped text. It is displayed within the area, decreasing the amount of text.
Input:-

Index.html
	
<body>   
    <p class="wordBreak">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, contenttttttttttttttttttttggggggggggggggggggeeeeeeeeeee here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p> 
</body>
Style.css
.wordBreak {  
    width: 11em;
    background-color: lightblue;
    border: 2px solid black;
    padding: 10px;
    word-wrap: break-word;
    font-size: 20px;
}

Output:-


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

PropertyDescription
horizontal-tbdefault value of this property in which the text is in the horizontal direction and read from left to right and top to bottom
vertical-lrsimilar to vertical-rl, but the text is read from left to right.
vertical-rldisplays an ellipsis (…) or three dots to show the clipped text. It is displayed within the area, decreasing the amount of text.
Input:-

Index.html
	
<body>   
    <p class="wordBreak">   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, contenttttttttttttttttttttggggggggggggggggggeeeeeeeeeee here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English  
      </p> 
</body>
Style.css
.wordBreak {  
    width: 250px;                 
    overflow: hidden;    
    border: 2px solid black;   
    font-size: 25px;    
    writing-mode: vertical-rl;
}

Output:-