CSS | overflow-wrap Property Last Updated : 24 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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 23Edge 18Firefox 49Opera 12.1Safari 7 Comment More infoAdvertise with us Next Article CSS | overflow-wrap Property A AakashYadav4 Follow Improve Article Tags : Web Technologies CSS CSS-Properties 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 3 min read 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 5 min read 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 2 min read 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 2 min read 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: 2 min read 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 6 min read 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 6 min read 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 6 min read HTML | DOM Style overflowY Property The Style overflowY property in HTML DOM is used to specify the behavior of the content when it overflows an element's top and bottom edges. The content may be hidden, shown or a scrollbar according to the value. Syntax: It returns the overflowY property.object.style.overflowYIt is used to set the o 6 min read Tailwind CSS Overflow This overflow is for controlling how an element content is handled that is too large for the container. It tells whether to clip content or add scroll bars. This class accepts more than one value in Tailwind CSS. It is the alternative to the CSS Overflow property. There is a separate property in CSS 7 min read Like