CssHow-ToBeginner · 3 min read

How to Use overflow-wrap in CSS for Word Wrapping

Use the overflow-wrap CSS property to control how words break and wrap inside a container. Setting overflow-wrap: break-word; forces long words to break and wrap to the next line, preventing overflow outside the container.

📐

Syntax

The overflow-wrap property accepts these main values:

normal: Words only break at normal break points (default).
break-word: Allows long words to break and wrap onto the next line.
anywhere: Breaks words at any point to prevent overflow.

This property helps keep text inside its container without horizontal scrolling.

css

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

💻

Example

This example shows a container with a very long word. Using overflow-wrap: break-word; forces the word to break and wrap inside the box, preventing overflow.

html

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  width: 300px;
  padding: 10px;
  border: 2px solid #333;
  overflow-wrap: break-word;
  background-color: #f0f0f0;
}

<div class="container">
  ThisIsAReallyLongWordThatWouldNormallyOverflowTheContainerButNowItBreaksNicely.
</div>

Output

A 300px wide box with a border containing the long word broken into multiple lines so it fits inside without horizontal scroll.

⚠️

Common Pitfalls

Common mistakes when using overflow-wrap include:

Not setting a fixed or max width on the container, so text never needs to wrap.
Confusing overflow-wrap with word-break, which behaves differently.
Forgetting to test on different screen sizes to ensure wrapping works responsively.

Always combine overflow-wrap with a width constraint for best results.

css

/* Wrong: No width set, so no wrapping happens */
.container {
  overflow-wrap: break-word;
  border: 1px solid black;
}

/* Right: Width set to allow wrapping */
.container {
  width: 200px;
  overflow-wrap: break-word;
  border: 1px solid black;
}

📊

Quick Reference

Value	Description
normal	Break words only at normal break points (default)
break-word	Break long words to prevent overflow
anywhere	Break words at any point to avoid overflow

✅

Key Takeaways

Use overflow-wrap: break-word to force long words to wrap inside containers.

Set a fixed or max width on containers to enable wrapping.

overflow-wrap helps prevent horizontal scrolling caused by long words.

Don't confuse overflow-wrap with word-break; they have different behaviors.

Test your layout on different screen sizes to ensure text wraps properly.