Master CSS overflow-wrap: How to Prevent Text and Long URLs from Breaking Your Layout

Have you ever seen a long URL, an email address, or a massive technical term completely spill out of its container and ruin a beautiful website layout? This common issue happens because browsers, by default, try to avoid breaking single words.

To fix this layout nightmare, we use the CSS overflow-wrap property. In this guide, you will learn how to easily handle long strings of text and keep your designs looking clean and professional.

The overflow-wrap property (formerly known as word-wrap) tells the browser whether it should break lines inside an otherwise unbreakable string of text when it exceeds the width of its containing box.

Simply put: It decides what to do when a single word is too long to fit on one line.

This property has two primary values that completely change how text behaves on your page:

The browser will only break lines at normal break points, such as spaces or hyphens. If a single word (like a long link) is wider than the container, it will simply overflow and stick out.

Best Used For: Standard body paragraphs, articles, and text blocks where you have full control over the content lengths.

p {
  overflow-wrap: normal;
}
                

If an unbreakable word or string of characters is too long to fit, the browser will force a break anywhere within the word to wrap it onto the next line.

Best Used For: User comments, long URLs, chat applications, and dynamic data inputs. This is a lifesaver for making text responsive on mobile screens.

p {
  overflow-wrap: break-word;
}