CSS
🎯 CSS word-wrap Property
The word-wrap property controls how long words behave when they exceed the width of their container.
It ensures that long words or URLs do not break the layout by overflowing outside their container.
🔹 Basic Usage
CSS
p {
word-wrap: break-word;
}
➡️ Long words are automatically broken and moved to the next line to prevent overflow.
🔸 Values
| Value | Description |
|---|---|
| normal | Default behavior; long words may overflow |
| break-word | Breaks long words to fit inside container |
| initial | Resets to default browser behavior |
| inherit | Inherits value from parent element |
🧩 Examples
normal behavior (overflow risk):
CSS
p {
word-wrap: normal;
}
➡️ Very long words may overflow outside the box.
break-word behavior:
CSS
p {
word-wrap: break-word;
}
➡️ Long words are broken and wrapped to the next line to keep layout clean.
💡 Summary
-
🧠 In Short
- The word-wrap property prevents long words from breaking layouts.
- It is especially useful for URLs, long strings, and responsive designs.
- The most commonly used value is break-word.