How to wrap text using CSS

Posted on Aug 26, 2021

A short guide on wrapping text using CSS

Photo from Unsplash

This tutorial will help you understand the word wrap behavior of CSS and how to use it in your HTML documents.

The CSS word-wrap property is commonly used to keep a line of text stays inside its container element by breaking long words into the next line.

By default, a long word without any space between will push through the width of the container if not broken.

The following HTML document creates a <p> tag with a width and visible borders:

<p style="width: 120px; border: 1px solid black">Loremipsumdolorsitamet</p>

The output will be as follows. Notice how the words ran past through the visible borders:

To avoid the text from overflowing outside the borders, you can use the word-wrap property that accepts 4 possible values as shown below:

word-wrap: normal|break-word|initial|inherit;

The normal value is the default value where a text will break only when there’s one or more spaces or special characters.

The break-word value will cause the text to break at the end of the container’s width:

<p style="
  width: 120px; 
  border: 1px solid black; 
  word-wrap: break-word;">

The HTML output will be as follows:

And that’s how you use the word-wrap CSS property.

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.