CSS overflow-wrap Property

What You’ll Learn

The overflow-wrap property tells the browser how to break long words or unbreakable text so it stays inside its container and does not cause horizontal overflow.

Introduction

The overflow-wrap property in CSS is used to specify how the browser should handle long words or unbreakable text that overflows the boundaries of its container.

This property helps improve the readability and layout of text content, especially in responsive design scenarios. It ensures that text does not break the layout or cause horizontal scrolling issues.

Definition and Usage

Use overflow-wrap: break-word on paragraphs, cards, sidebars, and links when content might include long strings without spaces, such as URLs, usernames, or generated identifiers.

The default normal value is fine for typical prose, but narrow layouts often need break-word to stay readable on small screens.

📝 Syntax

The overflow-wrap property can be applied to any block-level or inline-level element. It has the following syntax:

element {

  overflow-wrap: normal | break-word;

}

Here, value can be one of the predefined keywords described below.

Basic Example

.text-container {

  width: 200px;

  overflow-wrap: break-word;

}

Syntax Rules

• Accepted values: normal and break-word.
• The container usually needs a width or max-width for wrapping behavior to matter.
• break-word breaks long words only when they would otherwise overflow.
• Also known historically as word-wrap in older CSS.

🎯 Default Value

The default value of the overflow-wrap property is normal. This means that the browser will use its default line-breaking rules, which may not always prevent long words from overflowing their container.

Switch to break-word when unbroken strings would spill outside narrow boxes or cause horizontal scrolling.

💎 Property Values

Examples Gallery

Wrap long words, compare defaults, handle URLs, and keep sidebar text inside narrow layouts.

<style>

  .text-container {

    width: 200px;

    border: 1px solid #ccc;

    padding: 10px;

    overflow-wrap: break-word;

  }

</style>



<div class="text-container">

  This is an example of a verylongwordthatwillbreakandwrapcorrectlyinsideitscontainerwithoutcausinganyoverflowissues.

</div>

.text-container {

  width: 200px;

  overflow-wrap: normal;

}

.link-card a {

  overflow-wrap: break-word;

}

.sidebar p {

  max-width: 100%;

  overflow-wrap: break-word;

  line-height: 1.5;

}

Works with word-break and overflow-x

overflow-wrap handles word breaking to prevent overflow. Pair it with word-break for stronger break rules, or use overflow-x when you need horizontal scrolling instead of wrapping.

.code-snippet {

  max-width: 100%;

  overflow-wrap: break-word;

  overflow-x: auto;

}

♿ Accessibility

• Prevent horizontal scrolling — Wrapping long strings helps users on small screens avoid sideways panning.
• Keep links readable — Broken URLs remain clickable when wrapping is applied thoughtfully.
• Avoid excessive mid-word breaks — Use break-word only where overflow would otherwise harm layout.
• Test with zoom — Text reflow at larger font sizes should still stay within containers.

💡 Best Practices