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 different CSS wrapping attributes, which include:

Flex-wrap

It is employed to specify whether the flexible items should be wrapped or not.

Syntax:

Example


flex-wrap: wrap| nowrap| wrap-reverse| initial| inherit;

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's understand the flex-wrap attribute through an illustrative example.

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

Code:

Example


<!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 employed to split lengthy words or to avoid the interruption of lengthy words in case the container exceeds its boundaries.

Syntax:

Example


word-wrap: break-word| normal| initial| inherit;

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's explore the word-wrap attribute through a practical illustration.

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

Code:

Example


<!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 observe the result when the word-wrap feature is utilized. The first paragraph, the third paragraph, and the fourth paragraph demonstrate the text extending beyond the boundaries of the box when the word-wrap attribute is defined as normal, initial, or inherit. In contrast, the second paragraph illustrates how lengthy words are broken when the word-wrap attribute is configured as break-word.

Overflow-wrap

It is employed to halt or wrap the lines in case the container exceeds its boundaries.

Syntax:

Example


overflow-wrap: normal| break-word| anywhere| initial| inherit;

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's understand the overflow-wrap attribute through the aid of a visual representation.

We will configure the overflow-wrap property to 'normal' and 'break-word'.

Code:

Example


<!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 observe the result when the overflow-wrap attribute is utilized. In the first paragraph, we can see the text exceeding the container boundaries due to the overflow-wrap attribute being defined as normal. Conversely, in the second paragraph, the extended words are split at appropriate points as the overflow-wrap attribute is specified as 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.

Flex-wrap

Syntax:

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

Word-wrap:

Syntax:

Demonstration:

Overflow-wrap

Syntax:

Illustration:

Browser Support:

Conclusion

Input Required