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
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.
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:
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.
