How to wrap text on a new line in CSS

Large chunks of text breaking the style or layout of your website? Here’s how to wrap text with CSS.

Long texts can seem out of hand when designing a web. But they can also be inevitable, and sometimes they end up crossing borders. This can create a loose Document Object Model (DOM) with unnecessary overflow that is not user-friendly.

But here’s the good news: you can handle such long texts by wrapping them on a new line using CSS. Here, we’ll show you how to wrap long, unbroken texts with CSS.

How CSS Text Wrapping Works

CSS handles long stretched words using the word wrap Where overfull property.

However, when left unchecked, browsers handle such long texts by default. They will not wrap long words until they are instructed to do so.

Related: What You Should Know About the DOM

The two main CSS properties mentioned earlier work the same and you can use them interchangeably. However, they accept four values ​​or syntaxes:

• breaking word: This is the current CSS syntax that tells the browser to insert long text into a new line.
• Ordinary: It breaks each word at normal separation points within a DOM. It has no effect on long chains.
• initial: this is the browser’s default way of managing channels. As the Ordinary syntax, it does not break long words.
• to inherit: It tells the child element to inherit the property from its parent. But it still doesn’t work with long texts except you are applying breaking word to the parent element.

How to wrap long words using CSS Word Wrap

Wrapping the words in a new line with CSS is easy and doesn’t require heavy CSS changes to work.

For example, the long h2 the text in the text container in the sample image below crosses the border line:

Let’s see how we can wrap it on the next line using the word wrap CSS property:

Html:

This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
 

CSS:

.wrap-it{
word-wrap: break-word;
}

After winding along h2 text in the example image, this is the result:

That’s it! You now know how to wrap words on a newline in your DOM using CSS.

Related: How to Target Part of a Webpage Using CSS Selectors

However, as stated previously, word wrap and overfull work in the same way and accept similar properties.

Use overfull instead, just replace word wrap with that.

It is important to wrap the words on a web page

In addition to adding more aesthetics to your web page, text wrapping compacts the DOM. Even if you control what happens in your content section, users can post links or other words that don’t fit in your text container or your entire DOM.

Therefore, applying text wrapping to such a section is necessary to keep the DOM intact.

Read more

About the Author