CSS word-wrap Property

What You’ll Learn

The word-wrap property tells the browser whether it may break long words when they overflow — a simple fix for narrow layouts and unbroken strings.

Introduction

The word-wrap property in CSS is used to specify whether or not the browser should break words when they overflow the content area. This can be particularly useful for preventing long words from stretching the layout of a web page and ensuring that text content remains readable and aesthetically pleasing.

In modern CSS, word-wrap is a legacy alias for overflow-wrap. Both names work in browsers today, but new projects should prefer overflow-wrap for clarity.

Definition and Usage

Apply word-wrap on text containers with a fixed or max width — cards, sidebars, comment boxes, and mobile columns. It works alongside word-break and white-space to control how text flows when space is limited.

📝 Syntax

The syntax for the word-wrap property is straightforward. It can be applied to any element that contains text content.

element {
  word-wrap: normal | break-word;
}

Basic Example

.wrapper {
  width: 200px;
  word-wrap: break-word;
}

Syntax Rules

• Accepted values: normal and break-word.
• The container usually needs a width or max-width for wrapping to matter.
• break-word breaks inside a word only when necessary to prevent overflow.
• Modern equivalent: overflow-wrap: break-word;
• The property is inherited.

Related Properties

• overflow-wrap — standard name for the same behavior
• word-break — more aggressive break rules inside words
• white-space — controls space collapsing and line wrapping
• hyphens — adds hyphenation at break points when supported

🎯 Default Value

The default value of the word-wrap property is normal, meaning that words will only break at normal line break points (such as spaces or hyphens).

💎 Property Values

The word-wrap property accepts two keyword values.

When to Use word-wrap

word-wrap helps whenever long unbroken strings meet narrow containers:

• Responsive cards — Keep text inside fixed-width UI on mobile.
• Long URLs and emails — Prevent horizontal scrolling in comments and chat.
• User-generated content — Handle unpredictable strings gracefully.
• Sidebars and widgets — Maintain layout when space is tight.
• Legacy codebases — Existing styles may still use word-wrap; it remains valid.

Examples Gallery

In this example, we’ll use the word-wrap property to ensure that long words break and wrap onto the next line to prevent overflow.

<style>
  .wrapper {
    width: 200px;
    border: 1px solid #000;
    word-wrap: break-word;
  }
</style>

<div class="wrapper">
  Thisisaverylongwordthatwillbreakandwrapontothenextline.
</div>

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

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

/* Legacy */
.legacy { word-wrap: break-word; }

/* Modern standard */
.modern { overflow-wrap: break-word; }

♿ Accessibility

• Prevent horizontal scroll — Wrapping long strings helps users with low vision and motor difficulties who struggle with sideways scrolling.
• Readability — break-word is gentler than word-break: break-all because it breaks only when needed.
• Screen readers — Visual line breaks do not change spoken text, but clearer layout still aids comprehension.
• Zoom — Test wrapping at 200% browser zoom on narrow viewports.

word-wrap + word-break

Start with overflow-wrap: break-word (or word-wrap: break-word) for general content. Add word-break: break-all only on elements like URLs or code where more aggressive breaks are acceptable.

.content {
  overflow-wrap: break-word;
}

.url {
  word-break: break-all;
}

💡 Best Practices