CSS Properties: How is white-space property is used to handle inside an element

Last update on March 01 2024 13:09:47 (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 is white-space property is used to handle inside an element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
p {
    white-space: pre-line; /* Sets the white space handling within the paragraph to pre-line */
}
</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>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.</p>
<!-- Displays a paragraph with text "w3resource web development tutorial." and breaks lines according to the specified white-space property -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates the use of the white-space property to control how white space inside an element is handled.
The CSS rule sets the white-space property of paragraphs to pre-line.
white-space: pre-line; collapses consecutive white spaces and breaks lines at newline characters, similar to the behavior of the HTML <pre> tag.

Live Demo:

See the Pen white-space-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page