How to wrap text inside and outside box using CSS ?

24 Jun, 2021
In this article, we are going to cover how one can wrap the text inside and outside the box using the CSS properties.
Approach: We will be using the “overflow-wrap” property. This property comes into the picture when the length of the content exceeds the parent component length. The “overflow-wrap” property can have mainly five values.
normal
break-word
inherit
initial
unset
The “normal” value will break lines according to the normal line breaking rules of the browser. The “inherit” will inherit the property of the parent element. But the value we are looking for is the “break-word“. 
The “break-word” property will break any string or word which exceeds the boundary of the parent block or division and will try to fit the content into the block providing a new line.
We will give the height and width property to fix value and not to auto, as auto increases the width based on the content length. 
HTML code: We have created one div with the class name “box” which is responsible for giving the fixed height, width, and overflow conditions. Inside this div box, we have our content <p> tag which is holding string values.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <style>        body {            background-color: #242B2E;            color: white;        }          .box {            margin: 30px;            height: 100px;            width: 100px;            background-color: #FF6666;            overflow-wrap: break-word;        }          .p {            color: white;            margin: 5px;            padding: 10px;        }    </style></head>  <body>    <div class="box">        <p>            try to read this word             chekolosvakialRegion        </p>    </div></body>  </html>
Class box without overflow condition: If the CSS used above is changed to the following for the class “box“.
In the above, we have not given any overflow conditions in the class box, so the normal behavior will be followed, and it will not break the lines until the break line is not specified which is white space. In this case, our content will overflow the box. 
Output:
content exceeding the boundaries
Class box with overflow condition: If the above CSS is modified with the following code.
After providing the overflow condition on the parent block box, we achieve the word wrapping on the content. Whenever the <p> tag content tries to exceed the boundary our overflow-wrap: break-word will break the word “chekolosvakialRegion” and tries to fit in the box. 
Output:
overflow-wrap: break-word 
We have successfully wrapped the content inside and outside the box using CSS property.
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type