How to Wrap Text in HTML

We’ll learn how to wrap text in HTML in today’s post.

Text Wrap in HTML

Text editors and word processors have features known as text wrap or a text flow. When the side of the page is reached, it enables the user’s text to be carried over to the following line.

Long words can be split up and wrapped into the following line thanks to the word-wrap attribute.

Syntax:

word-wrap: value

The four values that word-wrap supports are listed as follows:

1. The word-wrap property’s default value is normal, which only breaks words at permitted places.
2. Unbreakable words can be broken thanks to the break-word value.
3. The value initial sets this property to its default setting.
4. The value inherit inherits this attribute from its parent element.

To further understand the previous concept, consider the following example.

<div>
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo World!
</div>

div {
    width: 350px;
    word-wrap: break-word;
}

The above example prints the phrase hello world within a div with 285 characters. The word-wrap: break-word; attribute is used to automatically break the word on the following line when the width on the screen surpasses 350px.