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:
Live Demo :
See the Pen word-wrap-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
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