How to Wrap text in Html

HTML 5 >   Structuring Web Documents >   Presentational Elements  

Long Question

305

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.

This Particular section is dedicated to Question & Answer only. If you want learn more about HTML 5. Then you can visit below links to get more depth on this subject.

HTML Syllabus
HTML Tutorial
HTML Chapter Wise Questions and Answers
HTML Assignment Chapter Wise
HTML MCQ Chapter Wise

# C Tutorials # JAVA Tutorials # HTML Tutorials # Computer Fundamental # Data Structure # DBMS Tutorials SQL # C# Language # R Language # PHP # Python # Vue JS

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF