CSS Properties: How word-warp property allows long words to be able to be broken and wrap onto the next line

Last update on March 01 2024 13:09:43 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How word-warp property allows long words to be able to be broken and wrap onto the next line</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
p { 
  width: 200px; /* Sets the width of paragraph elements to 200 pixels */
  background: #66CCFF; /* Sets the background color of paragraph elements */
  word-wrap: /* Specifies the behavior for long words that don't fit in the container */
  break-word; /* Breaks long words to fit within the container */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h3><strong>w3resource Tutorial</strong></h3><!-- Displays a level 3 heading with strong text "w3resource Tutorial" -->

<p><!-- Begins a paragraph element -->
w3resource web development tutorial. w3resourcewebdevelopmenttutorial. <!-- Displays text within the paragraph, including long words -->
w3resource web development tutorial. w3resource web development tutorial. w3resourcewebdevelopmenttutorial. <!-- Displays text within the paragraph, including long words -->
w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. <!-- Displays text within the paragraph, including long words -->
</p><!-- Ends the paragraph element -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates the use of the word-wrap property in CSS to allow long words to be broken and wrap onto the next line within a specified width.
The CSS rule sets the width of paragraph elements to 200 pixels and specifies the background color.
The word-wrap property with the value break-word allows long words to break and wrap onto the next line within the specified width, ensuring they fit within the container without overflowing.

Live Demo :

See the Pen word-wrap-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page