CssHow-ToBeginner · 3 min read

How to Use Word-Wrap in CSS for Text Wrapping

Use the word-wrap property in CSS to control how long words break and wrap onto the next line. Setting word-wrap: break-word; forces long words to wrap inside their container instead of overflowing.

📐

Syntax

The word-wrap property accepts these main values:

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

Note: word-wrap is an alias for overflow-wrap in modern CSS.

css

word-wrap: normal;
word-wrap: break-word;

💻

Example

This example shows a container with a very long word. Using word-wrap: break-word; makes the word wrap inside the box instead of overflowing.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word-wrap Example</title>
<style>
  .box {
    width: 200px;
    border: 2px solid #333;
    padding: 10px;
    word-wrap: break-word;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
  <div class="box">
    ThisIsAReallyLongWordThatWouldNormallyOverflowTheContainerButNowItWrapsNicely.
  </div>
</body>
</html>

Output

A 200px wide box with a border containing a very long word that breaks and wraps onto multiple lines inside the box instead of overflowing horizontally.

⚠️

Common Pitfalls

One common mistake is expecting word-wrap to break words anywhere without setting it to break-word. The default normal value will not break long words, causing overflow.

Also, word-wrap is now considered an alias for overflow-wrap. Using overflow-wrap is recommended for modern CSS.

css

/* Wrong: default does not break long words */
.box {
  width: 150px;
  border: 1px solid black;
  word-wrap: normal; /* or omitted */
}

/* Right: forces breaking long words */
.box {
  width: 150px;
  border: 1px solid black;
  overflow-wrap: break-word;
}

📊

Quick Reference

Property	Values	Description
word-wrap	normal	Break words only at allowed break points (default)
word-wrap	break-word	Force long words to break and wrap
overflow-wrap	normal	Same as word-wrap: normal
overflow-wrap	break-word	Same as word-wrap: break-word; preferred modern property

✅

Key Takeaways

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

word-wrap is an alias for overflow-wrap; prefer overflow-wrap in modern CSS.

Without break-word, long words may overflow their container causing layout issues.

Set a container width to see the wrapping effect clearly.

Always test text wrapping on different screen sizes for responsive design.