CSS | word-wrap Property

02 Jan, 2019
The word-wrap property in CSS is used to break long word and wrap into the next line. It defines whether to break words when the content exceeds the boundaries of its container.
Syntax:
word-wrap: normal|break-word|initial|inherit;
Property Value:
normal: It is the default value, The lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.).Syntax:word-wrap: normal;Example:<!DOCTYPE html><html>    <head>        <title>            word-wrap property        </title>                  <style>            div {                word-wrap:normal;                width: 150px;                 border: 1px solid black;            }        </style>    </head>          <body>        <div>            GeeksforGeeks:AComputerSciencePortalForGeeks        </div>          </body></html>                    Output:
Syntax:
word-wrap: normal;
Example:
<!DOCTYPE html><html>    <head>        <title>            word-wrap property        </title>                  <style>            div {                word-wrap:normal;                width: 150px;                 border: 1px solid black;            }        </style>    </head>          <body>        <div>            GeeksforGeeks:AComputerSciencePortalForGeeks        </div>          </body></html>                    
Output:
break-word: Words that exceed the width of the container will be arbitrarily broken to fit within the container’s bounds.Syntax:word-wrap: break-word;Example:<!DOCTYPE html><html>    <head>        <title>            word-wrap property        </title>                  <style>            div {                word-wrap:break-word;                width: 150px;                 border: 1px solid black;            }        </style>    </head>          <body>        <div>            GeeksforGeeks:AComputerSciencePortalForGeeks        </div>          </body></html>                    
Syntax:
word-wrap: break-word;
Example:
<!DOCTYPE html><html>    <head>        <title>            word-wrap property        </title>                  <style>            div {                word-wrap:break-word;                width: 150px;                 border: 1px solid black;            }        </style>    </head>          <body>        <div>            GeeksforGeeks:AComputerSciencePortalForGeeks        </div>          </body></html>                    
initial: It is used to set word-wrap property to its default value.
inherit: This property is inherited from its parent.
Supported Browsers: The browser supported by word-wrap property are listed below:
Google Chrome 4.0
Internet Explore 5.5
Firefox 3.5
Safari 3.1
Opera 10.5
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
Roadmap to Learn JavaScript For Beginners
How to fetch data from an API in ReactJS ?