CSS | overflow-wrap Property

CSS | overflow-wrap Property

Last Updated : 24 Aug, 2022

The overflow-wrap property in CSS is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit. This property was earlier known as word-wrap that still supported by some browsers but it was renamed to overflow-wrap in a CSS3 draft.

Syntax:

.box{
    overflow-wrap: break-word;
}

Values:

normal: The lines will break according to the original line breaking rules.
break-word: Words that are too long to fit in a container-element break into parts.
inherit: It allows the element to inherit value from its parent.
initial: It makes the property to use its default value.

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS overflow-wrap property
    </title>

    <style>
        p {
            color: green;
        }

        .gfg {
            margin: auto;
            padding: 15px 15px;
            color: white;
            background-color: green;
            font-size: 20px;
            width: 60px;
            overflow-wrap: break-word;
        }

        div {
            text-align: justify;
        }

        h1,
        h2 {
            color: green;
        }

        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>overflow-wrap property</h2>
    <div class="gfg">
        A computer science portal for geeks.
    </div>
</body>

</html>

Output:

Supported Browsers:

Chrome 23
Edge 18
Firefox 49
Opera 12.1
Safari 7

CSS | overflow-wrap Property

A

AakashYadav4

Improve

Article Tags :

Similar Reads

CSS overflow-x Property

The overflow-x property in CSS specifies whether to add a scroll bar, clip the content, or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.T

CSS overflow-y Property

The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element's top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property. Syntax: overflow-y: scroll | hidden

CSS overflow Property

The CSS overflow property is used to set the overflow behavior of an element. It is the shorthand property of overflow-x and overflow-y properties. This property is used to control the large content.Syntax:overflow: visible | hidden | clip | scroll | auto;Property Values:visible: The content is not

CSS flex-flow Property

The flex-flow property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction. Note:The flex property is useless when the element is not a flexible item. Syntax:flex-flow: flex-direction flex-wrap;Values of flex-flow property:row nowrap: It

CSS word-wrap Property

The word-wrap property in CSS is used to manage the breaking and wrapping of long words within an element, ensuring that the content fits within its container. This property is essential for maintaining readability and layout integrity when dealing with lengthy words or strings without spaces. Synta

CSS | shape-outside Property

The shape-outside property is used to define the shape that the adjacent inline content may wrap around. It can be used to define complex shapes including images that can be used to wrap text around instead of simple boxes. Syntax: shape-outside: <basic-shape> | <shape-box> | <image

How to use text overflow property in CSS ?

In this article, we will see how to set text overflow property in CSS. The text-overflow property is used to specify that some text has overflown and hidden from view from the user. The text-overflow property only affects content that is overflowing a block container element. Syntax: text-overflow:

HTML | DOM Style overflow Property

The Style overflow property in HTML DOM is used to specify the behavior of the content when it overflows the element box. The content may be hidden, shown or a scrollbar maybe shown according to the value. Syntax: It returns the overflow property.object.style.overflowIt is used to set the overflow p

Primer CSS Layout Overflow

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by

HTML | DOM Style overflowX Property

The Style overflowX property in HTML DOM is used to specify the behavior of the content when it overflows an elementâ€™s left and right edges. The content may be hidden, shown or a scrollbar according to the value. Syntax: It returns the overflowX property.object.style.overflowXIt is used to set the o