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.

word-break

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

Syntax

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

Values

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.

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 javaTpoint.com
        </p> 
        <h2>word-break: keep-all;</h2> 
        <p class="jtp1"> 
            Welcome to the javaTpoint.com 
        </p>
</center>		
	</body> 
</html>

Test it Now

word-wrap

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.

Syntax

Values

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.

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>

Test it Now

text-overflow

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.

Syntax

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.

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 javaTpoint.com
        </div> 
        <h2> 
            text-overflow: ellipsis; 
        </h2> 

		<div class="jtp1"> 
            Welcome to the javaTpoint.com 
        </div>
		</center>
    </body> 
</html>

Test it Now

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

Syntax

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.

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>

Test it Now

Next TopicCSS text-align

← prev next →