RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/word-break-answer.php below:

Website Navigation

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

CSS Properties: How to specify the word-break property to allow words to be continued to the next lineLast update on March 01 2024 13:09:13 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4