How to wrap text inside and outside box using CSS ?

Last Updated : 08 May, 2023

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.

Example: In this example, we are using the above-explained approach.

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

.box{ margin: 30px; height:100px; width: 100px; background-color: #FF6666; }

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.

.box{ margin: 30px; height:100px; width: 100px; background-color: #FF6666; overflow-wrap: break-word; }

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: