How to wrap text in CSS
CSS is all about presentation. Discover how How to wrap text in CSS works to transform plain HTML into a premium user experience in the guide below.
The CSS word-wrap attribute is employed to divide lengthy words and shift them to the next line. This attribute is crucial in preventing overflow when a string cannot be broken and exceeds the width of its container.
This attribute controls where words are broken to prevent overflow when they are too lengthy for the container. It determines how words are split when they extend beyond the limits of the container.
Syntax
word-wrap: normal | break-word | initial l inherit ;
Values
It represents the default setting utilized to separate words exclusively at permissible breakpoints.
break-word: This property is employed to allow long, unbreakable words to be broken and wrapped onto the next line if necessary.
It is employed to establish the attribute back to its original default state.
The property is passed down from the parent element through inheritance.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.test {
width: 200px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
font-size: 20px;
}
.test1 {
width: 11em;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Without Using word-wrap </h1>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. </p>
<h1> Using word-wrap: break-word; </h1>
<p class="test1"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>
</body>
</html>
Output
