CSS Properties: How to specify the word-break property to allow words to be continued to the next line

Last update on March 01 2024 13:09:46 (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 to specify the width of the content area of an element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div {
    width:60%; /* Sets the width of the div element to 60% of its containing block */
}
</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" -->

<div>w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial. w3resource web development tutorial.</div>
<!-- Displays a div element containing a lengthy text with its width set to 60% -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use the word-break property in CSS to control the behavior of words that exceed the width of an element.
The CSS rule sets the width of paragraph elements with class "w3r" to 140 pixels and adds a border to them.
The word-break: break-all; property allows words to be broken and continued to the next line if they exceed the width of the paragraph element.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page