CSS text-wrap property

We often encounter situations where text refuses to stay within the bounds of its container. Long, unbroken words or strings without spaces can overflow, causing design problems and affecting readability. This is where the versatile CSS text-wrap property comes to the rescue.

What is text-wrap?

The text-wrap property provides control over how text is allowed to break within an element to fit its container. Let’s explore all its possible values:

Examples in action

Let’s see how these values work in practice:

HTML:

<div class="container">
  <p class="normal">This is a paragraph with normal text-wrap behavior.</p>
  <p class="nowrap">Thisisaverylongwordwithoutspaces.</p>
  <p class="break-word">Anotherverylongworddemonstratingwordbreaking.</p>
</div>

CSS:

.container {
  width: 250px;
  border: 1px solid black;
}

.normal {
  text-wrap: normal;
}

.nowrap {
  text-wrap: nowrap;
}

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

Common use cases

Key considerations

The CSS text-wrap property is great for managing text overflow situations. Understanding its different values empowers you to create cleaner, more polished, and user-friendly web designs.