How to Wrap text in Html

Long Answer
Views 192

Answer:

If we want to wrap the text in Html, then we have to follow the steps which are given below. Using these steps, any user can easily wrap any text, which is to be shown on the web page.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.


<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Wrap the text  
</Title>  
</Head>  
<Body>   
 Hello User   
 Your are at atnyla.  
If we want to wrap the text in Html, then we have to follow the steps which are given on this page.   
</Body>   
</Html>

Step 2: Now, we have to use word-wrap property. So, we have to place the cursor between the head tag just after the title tag. And, then we have to define a class and <div> tag sector in the <style> tag as shown in the following block.


<Head>      
<Title>     
Wrap the text  
</Title>  
<style>  
div {  
  width: 100px;   
  border: 2px solid red;  
}  
div.class_name {  
  word-wrap: normal;  
}  
</style>  
</Head>

Step 3: Now, we have to define that class before the text, which we want to wrap.


<div class="a">Any text which we want to wrap </div>

Step 4: And, at last, we have to save the file and run the file in the browser.


<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Wrap the text  
</Title>  
<style>  
div {  
  width: 100px;   
  border: 2px solid blue;  
}  
div.a {  
  word-wrap: normal;  
}  
div.b {  
  word-wrap: break-word;  
}  
</style>  
</Head>  
<Body>   
 Hello User   
 <div class="a">Your are at atnyla. If we want to wrap the text in Html then we have to follow the steps which are given in this page. </div> <br>  
   <div class="b">Your are at atnyla. If we want to wrap the text in Html then we have to follow the steps which are given in this page. </div>  
</Body>   
</Html>

Preview

If you will run above code, you will get below output.

Related Articles:

This section is dedicated exclusively to Questions & Answers. For an in-depth exploration of HTML 5, click the links and dive deeper into this subject.

Go to Question List

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF