/    /  CSS Text Effects

CSS Text Effects

 

The properties of the CSS text effect help us to make the text attractive and clear.

  • word-break
  • text-overflow
  • word-wrap
  • writing-mode

 

word-break:

 

Words should break at the end of the line(line break rules).

 

Values:

 

  • keep-all
  • break-all

 

Example:

 

<!DOCTYPE html>
<html>
  <head>
    <title>word-break: break-all</title>
    <style> 
      .wbr{
        width: 150px; 
        border: 2px solid red;
        word-break: break-all; 
        text-align: left;
        font-size: 25px;
       color: blue;
      }
      .wbr1{
        width: 156px; 
        border: 2px solid #cc3300;
        word-break: keep-all; 
        text-align: left;
        font-size: 25px;
       color: blue;
      }
    </style>
  </head>
   <center>
  <body>
    <h2>word-break: break-all;</h2>

    <p class="wbr">
      Welcome to the i2tutorials
    </p>
    <h2>word-break: keep-all;</h2>
    <p class="wbr1">
      Welcome to the i2tutorials
    </p>
</center>                   
      </body>
</html>

 

OUTPUT:

 

CSS Text Effects

 

word-wrap:

 

Break the long words and wrap onto the next line.

 

Example:

 

<!DOCTYPE html> 
<html> 
<head> 
<style>
h1{
color:#cc3300;
}
.test { 
   width: 200px; 
   background-color: #ffc299;  
   border: 2px solid red; 
   padding:10px;
   font-size: 20px;

}
.test1 { 
   width: 11em; 
   background-color: #ffc299;  
   border: 2px solid red; 
   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, enter your content hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </p> 
<h1> Using word-wrap: break-word; </h1>
<p class="test1"> In this paragraph, enter you content here,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,Thank you! </p> 
 </center>      
</body> 
</html>

 

OUTPUT:

 

CSS Text Effects

 

text-overflow:

 

Which is not visible to the user.

 

Example:

 

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .tut{
         white-space: nowrap; 
          height: 30px;
         width: 250px;                                             
         overflow: hidden; 
         border: 2px solid black;
         font-size: 25px;
         text-overflow: clip;
            }
      .tut1 {
       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> over the bordered content to see the full content. </p>

    <h2>
      text-overflow: clip;
    </h2>

    <div class="tut">
      Welcome to the I2tutorials
    </div>
    <h2>
      text-overflow: ellipsis;
    </h2>

              <div class="tut1">
      Welcome to the I2tutorials
    </div>
            </center>
  </body>
</html>

 

OUTPUT:

 

CSS Text Effects

 

writing-mode:

 

The text will be written in the horizontal or vertical direction.

 

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">  horizontal-tb; </h2>
<h2 id="lr" style= "height: 300px;">  vertical-lr; </h2><br>
<h2 id="rl" style= "height: 300px;"> vertical-rl; </h2>
</center>
</body>
</html>

 

OUTPUT:

 

CSS Text Effects