In this tutorial we will show you the solution of CSS wrap text in div, for this there is a property in CSS with the name word-wrap. As indirect, today we are going to understand how to use the word-wrap property that helps us to wrap text in a div.
Let’s understand this with help of an example.
Step By Step Guide On CSS Wrap Text In DIV :-
In this article, we are going to understand wrap text with help of the word-wrap property.
Generally, there are many values that we can give to the word-wrap property. Let us see the syntax to apply word-wrap first.
word-wrap: normal|break-word|initial|inherit;
As there are many values that we can give to the word-wrap property. But here we want to wrap text inside a div.
So, let us see how to apply word-wrap to a div with help of the example given below.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
div {
width: 200px;
border: 1px solid black;
}
div.divOne{
word-wrap: normal;
}
div.divtwo {
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
CSS wrap text in div
</h2>
<h2>word-wrap: normal (default):</h2>
<div class="divOne">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</div>
<h2>word-wrap: break-word:</h2>
<div class="divTwo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</div>
</body>
</html>- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, here with help the above example, we easily understand how to use word-wrap in a div. We also show an example of a div with text with or without word wrap.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand CSS wrap text in div.
I hope this tutorial on CSS wrap text in div helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
