CSS Wrap

We will comprehend the CSS wrap in this article. The wrap properties in CSS are used to wrap the text or element within the container.

There are various CSS wrap properties, which are as follows:

Flex-wrap

It is utilized to define that the flexible items should either be wrapped or not.

Syntax:

The flex-wrap is the CSS property in the above syntax, and the value given to this property can be wrap, nowrap, wrap-reverse, initial, and inherit. The values are discussed below:

Wrap: It is utilized to describe the flexible items to wrap if required.
nowrap: It is utilized to describe the flexible items, not to wrap the elements. It is the default value.
Wrap-reverse: It is utilized to describe the flexible items to wrap if required but in reverse order.
Initial: It is utilized to define the default value.
Inherit: It is utilized to inherit the property of the parent element.

Note: The elements must be flexible; only then the "flex-wrap" CSS property will show its effects which means the "display" CSS property of elements must be set to flex.

Demonstration

Let us comprehend the flex-wrap property with the help of the demonstration.

We will set the flex-wrap to wrap, nowrap, wrap-reverse, initial, and inherit.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>flex-wrap CSS property</title>
    <style>
    .flex1 {
        width: 100px;
        height: 125px;
        border: 1px solid #f1a7a7;
        display: flex;
        flex-wrap: wrap;
        }
    .flex2 {
        width: 100px;
        height: 125px;
        border: 1px solid #f1a7a7;
        display: flex;
        flex-wrap: nowrap;
        }
    .flex3 {
        width: 100px;
        height: 125px;
        border: 1px solid #f1a7a7;
        display: flex;
        flex-wrap: wrap-reverse;
        }
    .flex4 {
        width: 100px;
        height: 125px;
        border: 1px solid #f1a7a7;
        display: flex;
        flex-wrap: initial;
        }
    .flex5 {
        width: 100px;
        height: 125px;
        border: 1px solid #f1a7a7;
        display: flex;
        flex-wrap: inherit;
        }

    .flex1 div, .flex2 div, .flex3 div, .flex4 div, .flex5 div {
        width: 50px;
        height: 50px;
        text-align: center;
        }
    </style>
</head>
<body>

<h1>The flex-wrap CSS Property</h1>
<h3>flex-wrap: wrap</h3>
    <div class="flex1">
        <div style="background-color: rgb(237, 111, 181);">1</div>
        <div style="background-color: rgb(192, 181, 59);">2</div>
        <div style="background-color: rgb(144, 121, 248);">3</div>
        <div style="background-color: rgb(245, 117, 37);">4</div>
    </div>
<h3>flex-wrap: nowrap</h3>
    <div class="flex2">
        <div style="background-color: rgb(237, 111, 181);">1</div>
        <div style="background-color: rgb(192, 181, 59);">2</div>
        <div style="background-color: rgb(144, 121, 248);">3</div>
        <div style="background-color: rgb(245, 117, 37);">4</div>
    </div>
<h3>flex-wrap: wrap-reverse</h3>
    <div class="flex3">
        <div style="background-color: rgb(237, 111, 181);">1</div>
        <div style="background-color: rgb(192, 181, 59);">2</div>
        <div style="background-color: rgb(144, 121, 248);">3</div>
        <div style="background-color: rgb(245, 117, 37);">4</div>
    </div>
<h3>flex-wrap: initial</h3>
    <div class="flex4">
        <div style="background-color: rgb(237, 111, 181);">1</div>
        <div style="background-color: rgb(192, 181, 59);">2</div>
        <div style="background-color: rgb(144, 121, 248);">3</div>
        <div style="background-color: rgb(245, 117, 37);">4</div>
    </div>
<h3>flex-wrap: inherit</h3>
    <div class="flex5">
        <div style="background-color: rgb(237, 111, 181);">1</div>
        <div style="background-color: rgb(192, 181, 59);">2</div>
        <div style="background-color: rgb(144, 121, 248);">3</div>
        <div style="background-color: rgb(245, 117, 37);">4</div>
    </div>
</body>
</html>

Output:

We can witness the output in which the flex-wrap property is applied.

Word-wrap:

It is utilized to break long words or to prevent the breaking of long words when the container overflows.

Syntax:

The word-wrap is the CSS property in the above syntax, and the value given to this property can be break-word, normal, initial, and inherit. The values are described below:

Break-word: It is utilized to break the long words when the container overflows.
Normal: This value is utilized to stop the breaking of the long words, and it is the default value.
Initial: It is utilized to set the default value.
Inherit: It is utilized to inherit the properties of the parent.

Demonstration:

Let us understand the word-wrap property with the help of the demonstration.

We will set the word-wrap to normal, break-word, initial, and inherit.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word-wrap CSS property</title>
    <style>
        div {
            width: 145px;
            height: 160px;
            border: 1px solid red;
        }
        #paragraph-1 {
            word-wrap: normal;
        }
        #paragraph-2 {
            word-wrap: break-word;
        }
        #paragraph-3 {
            word-wrap: initial;
        }
        #paragraph-4 {
            word-wrap: inherit;
        }
    </style>
</head>
<body>
    <h1>The word-wrap CSS property</h1>
    <h3>Paragraph-1: When word-wrap is set to normal</h3>
    <div>
        <p id="paragraph-1">This paragraph consists of a VeryVeryVeryVeryLongWord, but it will not break even when the container overflows.</p>
    </div>
    <h3>Paragraph-2: When word-wrap is set to break-word</h3>
    <div>
        <p id="paragraph-2">This paragraph consists of a VeryVeryVeryVeryLongWord. The long word will break and come to the next line when the container overflows.</p>
    </div>
    <h3>Paragraph-3: When word-wrap is set to initial</h3>
    <div>
        <p id="paragraph-3">This paragraph consists of a VeryVeryVeryVeryLongWord, but it will not break even when the container overflows.</p>
    </div>
    <h3>Paragraph-4: When word-wrap is set to inherit</h3>
    <div>
        <p id="paragraph-4">This paragraph consists of a VeryVeryVeryVeryLongWord. The long word will not break when the container overflows.</p>
    </div>
</body>
</html>

Output:

We can witness the output in which the word-wrap property is applied. Paragraphs 1, paragraph 3, and paragraph 4 show the words overflowing from the container when the word-wrap property is set to either normal, initial, or inherit. Paragraph 2 displays the breaking of long words when the word-wrap property is set to break-word.

Overflow-wrap

It is utilized to prevent or break the lines when the container overflows.

Syntax:

The overflow-wrap is the CSS property in the above syntax, and the value given to this property can be normal, break-word, anywhere, initial, and inherit. The values are discussed below:

Normal: This value is used to let the container overflow so it will not break the long words, and it is the default value.
Break-word: It is used to break the long words only when the container overflows.
Anywhere: When the container overflows, then this value breaks the long words.
Initial: It is used to set the default value.
Inherit: It is utilized to inherit the properties of the parent element.

Illustration:

Let us comprehend the overflow-wrap property with the help of the illustration.

We will set the overflow-wrap to normal and break-word.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow-wrap CSS property</title>
    <style>
        div {
            width: 130px;
            height: 175px;
            border: 1px solid red;
        }
        #paragraph-1 {
            overflow-wrap: normal;
        }
        #paragraph-2 {
            overflow-wrap: break-word;
        }
    </style>
</head>
<body>
    <h1>The overflow-wrap CSS property</h1>
    <h3>Paragraph-1: When overflow-wrap is set to normal</h3>
    <div>
        <p id="paragraph-1">This paragraph consists of a VeryVeryVeryVeryLongWord, but it will not break even when the container overflows.</p>
    </div>
    <h3>Paragraph-2: When overflow-wrap is set to break-word</h3>
    <div>
        <p id="paragraph-2">This paragraph consists of a VeryVeryVeryVeryLongWord, but it will  break when the container overflows.</p>
    </div>
</body>
</html>

Output:

We can witness the output in which the overflow-wrap property is applied. Paragraph 1 shows the words overflowing from the container because the overflow-wrap property is set to normal, and paragraph 2 displays the breaking of long words because the overflow-wrap property is set to break-word.

Browser Support:

Following are the browsers that support CSS wrap properties:

Google Chrome
Safari
Opera
Microsoft Edge
Firefox

Conclusion

We have comprehended the CSS wrap in this article. We have seen various CSS wrap properties:

Flex-wrap property: It is utilized to wrap the flexible elements when the container overflows.
Word-wrap property: It is utilized to wrap the long words when the container overflows.
Overflow-wrap property: It is utilized to wrap the long words and break the lines when the container overflows.

Next TopicHow to Remove Scroll Bar in CSS

← prev next →