Everything You Need to Know About CSS Wordwrap

When developing web pages, creating aesthetically pleasing layouts can make a huge difference for users. Whether you’re a seasoned web designer or just starting your journey with CSS, understanding the ins and outs of CSS wordwrap is essential for crafting visually stunning and user-friendly websites.

In this article, we will learn what CSS wordwrap does, when to use it, and how it can transform your web projects from ordinary to extraordinary.

What is CSS wordwrap?

When text is placed inside of an element with a fixed width, something needs to happen if the text width exceeds that of its container element. By default, if the length of a line of text exceeds its container, the browser will wrap the text around to a new line.

The place where a line is allowed to break and wrap around to a new line is called a breakpoint. For most languages including English, the breakpoint occurs between unhyphenated words.

Here’s an example of what the default behavior looks like. The green div below is set to 300 pixels wide, so the text inside wraps at the points where the next word would hit the right-side border.

See the Pen css wordwrap - default example by HubSpot (@hubspot) on CodePen.

However, we start to run into problems when we don’t have a natural breakpoint, such as with a particularly long word. Without a breakpoint, a long word will by default exceed the boundary of its container — this is called overflow. See below:

See the Pen css wordwrap - overflow example by HubSpot (@hubspot) on CodePen.

The browser creates a new line for the word supercalifragilisticexpialidocious, but then this word is itself too long for its container and so we get overflow. It’s still readable, but it looks odd, so what can we do about it? This is when we need to wrap individual words too.

Before we continue, it’s true that most English words aren’t longer than a dozen letters or so. But, this becomes a problem for languages that don’t utilize spaces as often or use complex compounding words, like German. It’s also an issue with URLs, which will also overflow their boundaries by default.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download for free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

How to Wrap Words in CSS

There are three properties you can use to wrap long words in CSS: overflow-wrap, word-wrap, and word-break. In this section, I’ll go over each one and explain how they work and when to use them.

The CSS overflow-wrap Property

The overflow-wrap property determines how a word is allowed to break in case of a word that overflows its container. It takes one of three values:

• normal: The browser will not break up long words, even if they overflow. This is the default behavior of the browser.
• anywhere: If a word overflows its container, the browser will break the word between characters. min-content is calculated with all possible breaks.
• break-word: If a word overflows its container, the browser will break the word between characters. min-content is calculated as if there were no word breaks.

In most cases, overflow-wrap: anywhere and overflow-wrap: break-word will give the same result. Here’s an example of these three values used on the same element:

See the Pen css wordwrap - overflow-wrap by HubSpot (@hubspot) on CodePen.

The difference between anywhere and break-word only matters if you’re using the min-content value in some way. min-content represents the smallest possible size an element can be while still keeping its content visible. If we set the width of our divs in the example above to be min-content (instead of 200px), we see a difference in how they look:

See the Pen css wordwrap - min-content by HubSpot (@hubspot) on CodePen.

Here, normal and break-word have the same result because the width of the div container is set to the longest word, so there are no mid-word line breaks. On the other hand, anywhere sets the min-content value to the smallest possible size, which is if there were a break after every character.

Since you probably won’t be dealing in min-content much, it’s best just to use overflow-wrap: break-word for most overflow cases.

The CSS word-wrap Property

word-wrap is another property you may have seen. This property works the same as overflow-wrap. However, overflow-wrap is a standard property. word-wrap is non-standard and is treated as a legacy property of overflow-wrap. So, you should default to using overflow-wrap for cross-browser compatibility.

The CSS word-break Property

The word-break property specifies where line breaks occur for words that overflow their container, accounting for conventions in Chinese, Japanese, and Korean writing systems (or “CJK” for short). It has three possible values:

• normal: The browser goes by the default line break rules.
• break-all: The browser adds a line break where the text would overflow, except for CJK text.
• keep-all: the browser avoids breaking CJK text at spaces. Non-CJK works the same as normal.

Again, let’s see these values side-by-side. I’ve also added a Korean sentence to demonstrate how each value works for CJK text:

See the Pen css wordwrap - word-break by HubSpot (@hubspot) on CodePen.

As you can see, break-all adds a break every time a word would otherwise overflow (for non-CJK text).

This behavior is similar to overflow wrap: break-word in that it causes a break in a word that would otherwise overflow. The difference is that word-break: break-all adds this break even if adding a break before the long word would prevent overflow. This is why, usually, overflow wrap: break-word is what you should use to break text.

Lastly, the reason why breaks are different for CJK and non-CJK text is that line breaks carry meaning in CJK writing systems. So, adding arbitrary line breaks in CJK text might change the meaning of the content.

Wrapping Your CSS Text

Your website’s layout is the first thing your users will notice before they dive into the content. It’s important to make it as visually appealing and user-friendly as possible, without strange text overflow that can immediately turn visitors off to your site..

Word wrapping empowers designers and developers to create such websites with our visitors in mind. As you continue your web development journey, keep these properties in mind when transforming long bodies of text.