CSS Text Wrap: Syntax, Usage, and Examples

The CSS text wrap property controls how text behaves when it reaches the end of a line or encounters other elements like images. It determines whether text breaks, stays on one line, or wraps around another element. Mastering text wrap CSS gives you control over layout, readability, and responsiveness, especially when working with dynamic content or mixed media.

How to Use CSS Text Wrap

The CSS text wrap behavior is mainly controlled by a few properties: white-space, word-wrap (or overflow-wrap), and float. Each handles a different aspect of text wrapping, from simple line breaks to wrapping text around images.

Here’s a basic usage of wrapping long text:

p {
  word-wrap: break-word;
}

This forces long words or URLs to wrap instead of overflowing outside the container.

If you want to wrap text around an image, you can use float:

img {
  float: left;
  margin-right: 15px;
}

Text will automatically wrap around the image, adjusting its position depending on the float direction.

When to Use Text Wrap CSS

Text wrapping is useful in many layout situations where content must remain legible and responsive, such as:

Preventing Overflow in Containers

Use wrapping to ensure long text strings don’t break your design:

div {
  width: 200px;
  word-wrap: break-word;
}

This ensures even long links or technical terms won’t overflow the box.

Wrapping Text Around Images

You can wrap text around images to create elegant blog posts, product descriptions, or editorial layouts:

img {
  float: right;
  margin-left: 10px;
}

Text flows around the image, making it feel embedded in the content.

Creating Readable, Responsive Layouts

On smaller screens, you’ll want text to wrap naturally rather than force horizontal scrolling. Use white-space: normal and overflow-wrap: break-word to allow this:

.responsive-text {
  white-space: normal;
  overflow-wrap: break-word;
}

This ensures legibility on all devices.

Examples of CSS Text Wrap in Action

Wrapping Long Words

p {
  overflow-wrap: break-word;
}

This prevents long words or URLs from breaking the layout.

Wrapping Text Around an Image

<img src="author.jpg" alt="Author photo" style="float: left; margin: 10px;">
<p>Jane Doe is a software engineer with a passion for accessible design. She believes...</p>

The text adjusts to fit neatly around the floated image.

Preventing Text from Wrapping

.nowrap {
  white-space: nowrap;
}

Use this when you want a heading or inline label to stay on a single line—even if it overflows:

<span class="nowrap">Do not wrap this label</span>

This is useful in tables, buttons, and tags.

Forcing Text to Break Mid-Word

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

This breaks text anywhere when needed—ideal for unbreakable strings like hashes or long file names.

Learn More About Wrapping Text in CSS

Key Properties That Control CSS Text Wrap

Here’s a breakdown of what each major property does:

• white-space: Controls how whitespace and line breaks are handled.
  • normal: Default. Text wraps normally.
  • nowrap: All text stays on a single line.
  • pre: Preserves whitespace and line breaks.
  • pre-wrap: Preserves both but allows wrapping.
• overflow-wrap (previously word-wrap): Specifies whether the browser should break long words to prevent overflow.
  • normal: Only breaks words at allowed points.
  • break-word: Allows breaking within words if needed.
• word-break: Defines when lines break within words.
  • normal: Breaks according to standard rules.
  • break-all: Breaks at any point, even in the middle of a word.
  • keep-all: Prevents breaking within words, often used with East Asian scripts.
• text-wrap: Though often searched for, text-wrap is not a standard CSS property (yet). The correct property is overflow-wrap.

Wrapping Text with CSS: Best Practices

To wrap text effectively, consider the following best practices:

• Use overflow-wrap: break-word for dynamic text that might include long strings or user-generated content.
• **Combine white-space and overflow-wrap for maximum control:

.wrap-text {
  white-space: normal;
  overflow-wrap: break-word;
}

• Test on mobile devices where wrapping matters more due to narrow viewports.
• Don’t rely on line breaks alone. Let the browser handle wrapping naturally with white-space: normal.

Wrap Text Around Image CSS Techniques

Wrapping text around images isn’t just about layout—it’s also about visual storytelling. Use float and margin:

img.left {
  float: left;
  margin-right: 20px;
}

img.right {
  float: right;
  margin-left: 20px;
}

You can also clear the float afterward to prevent layout issues:

<div style="clear: both;"></div>

This ensures the rest of your content starts below the floated elements.

CSS No Wrap Text and When to Use It

If you need to prevent wrapping—for example, in tags, labels, nav links, or buttons—use:

.no-wrap {
  white-space: nowrap;
}

This keeps the text on one line, even if it overflows the container. Pair it with text-overflow: ellipsis for clean truncation:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This creates a clipped look with "..." at the end when space runs out.

CSS Wrapping Text in Responsive Layouts

Responsive design thrives on good wrapping rules. Use flexible containers and set wrapping rules that prevent horizontal scrolling:

.responsive-block {
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

This ensures content adapts to the screen, no matter how long the words are.

Advanced Techniques: CSS Wrapping with Flex and Grid

In CSS Flexbox, wrapping is controlled with the flex-wrap property, not text-wrap, but wrapping still affects how text behaves inside flex items:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

If your text is in a flex item, ensure its content wraps correctly:

.flex-item {
  min-width: 200px;
  white-space: normal;
  overflow-wrap: break-word;
}

Grid layouts work the same way—set the text container's wrapping rules directly.

Accessibility and Readability Tips

Proper text wrapping improves accessibility and reading flow. Always:

• Use readable line lengths (45–75 characters per line).
• Avoid forcing no-wrap unless necessary.
• Ensure text doesn’t spill out of containers on smaller screens.
• Test with zoom enabled to ensure wrapping still works.

CSS Wrapping Text in Buttons, Labels, and Badges

Sometimes you want short UI text to stay on one line, especially in navigation bars or badges. Use this pattern:

.button-text {
  white-space: nowrap;
}

For buttons or badges with dynamic content, allow wrapping only after a certain width:

.badge {
  white-space: normal;
  max-width: 150px;
  word-break: break-word;
}

This avoids layout breaks while still supporting long or unexpected content.

Using CSS text wrap gives you full control over how text behaves on the page. Whether you're wrapping text around an image, preventing text overflow, or designing mobile-friendly components, knowing when and how to wrap the text in CSS is essential. Combine properties like white-space, word-break, and overflow-wrap to get flexible, elegant typography that holds up across screen sizes and browsers.