You are currently viewing How to wrap the div text in CSS
  • Post category:CSS

How to wrap the div text in CSS

CSS wrap text in div

Wrap the text in a div element to keep it from being displayed on a single line. This article is about how to wrap div text in CSS.

What is wrap text

If we write content in an element, we wrap the text so that the content does not come out of the element, that is wrap text or wrap word. For example, if we create a box and write long words inside it, the word will be displayed in one line without wrapping the long words. If you wrap it using CSS property then the next line will display

Before using the word-wrap property:

If you use a longword it will display correctly on the desktop screen but the mobile screen will display like the below image

before using word-wrap property

After using the word-wrap property:

So, if you use the CSS word-wrap attribute to fix it you will get results like the below image. The text will wrap to fit the responsive screen.

after using the word-wrap property

How to wrap a text

word-wrap: break-word;

To wrap the text of a div element, you need to use the CSS “word-wrap” property and give it a value of “break-word“. If your word is long it will automatically display on the next line. And this is a simple way to wrap all the text inside the border of your div element. By default, the value of the word-wrap property is “nowrap” so it won’t wrap any text, so if we change it to value “break-word” then word wrap will happen.

<html>
<head>
<title>word wrap</title>
<style type="text/css">
div{
border: 2px solid grey;
width: 40%; }
p{
word-wrap: break-word; }
</style>
</head>
<body>
<div> 
<p>Wonder develop containing information about front-end 
and back-end development, web designing, fullstock develop
, Web programming, Content development and Webmaster..
</p> </div>
</body>
</html>

Result:

READ ALSO  Simple Way to Make a List that Lists its Items with Squares

css wrap text in div

Steps:
1. In the above code, I’ve added a p tag inside a div element and put some text inside it.
2. I add a border and width to the div element in CSS to detect the difference when wrapping the text.
3. To wrap all the text inside your <p> tag, you should use the CSS “word-wrap” property on the p tag and give it a value of “break-word”.

Conclusion

So through this article, I hope you will learn how to display a text responsively on all screens.

Leave a Reply