By Alligator, Matt Abrams and Vinayak Baranwal
Introduction
Browsers wrap text by default to keep content inside a container. There are cases where you want a string of text or a row of inline elements to stay on one line: navigation links, button labels, code identifiers, table cells, or single-line previews with truncation. CSS gives you several properties for this, including white-space, overflow-wrap, word-break, hyphens, flex-wrap, and text-overflow.
In this tutorial, you will work through each property with runnable examples, combine them for single-line truncation with an ellipsis, and compare declarative text properties against layout-level approaches that use flexbox and CSS Grid. By the end, you will know which property to reach for in each scenario, including text inside a <span>, list items in a navigation bar, long unbreakable strings such as URLs, and flex children that should never wrap.
Key Takeaways
- Reach for
white-space: nowrapfirst when one element should never wrap, but pair it withoverflow: hiddenoroverflow: autowhenever the content can be longer than the container, otherwise the page itself will scroll horizontally. - Use
overflow-wrap: break-wordfor long URLs, hashes, and tokens inside cards or table cells. Chooseoverflow-wrap: anywhereinstead when the same element is a flex or grid child, becauseanywherereduces the item’smin-contentsize and prevents the parent from being stretched. - Single-line truncation needs all three of
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsis. Drop any one and the ellipsis will not appear. - For multi-line truncation (two, three, or N lines with an ellipsis), use
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: N, andoverflow: hidden. The modernline-clampshorthand is shipping but the prefixed form still has the widest support. flex-wrap: nowrapis the flexbox default, but it does not stop overflow on its own. Setmin-width: 0on flex children that contain long text, otherwise the children refuse to shrink past their content size and overflow the container.hyphens: autodoes nothing without alangattribute on the element or the<html>root, and it requires Safari’s-webkit-hyphensprefix.hyphens: manualactivates only at explicit­soft hyphens you have placed in the markup.- Match the property to the scope you control:
white-space,overflow-wrap,word-break, andhyphensare text-level properties that act on one element’s content.flex-wrapand grid track sizing are layout-level properties that act on the relationship between siblings.
Prerequisites
To complete this tutorial, you will need:
- A code editor of your choice, such as
nanoor Visual Studio Code - A web browser
- A comfort with HTML fundamentals. You can view our tutorial series How To Build a Website with HTML for an introduction.
What Causes Unwanted Line Breaks in CSS
Unwanted line breaks come from one of three causes, and each one has a different fix. Diagnose the cause first, then pick the property.
- Text wrapping inside a single element. The element is narrower than its content and the browser breaks at the nearest space. Fix on the element itself with
white-space: nowrap, optionally combined withoverflowandtext-overflowfor truncation. - A long unbreakable string overflowing. A URL, hash, or token has no soft wrap opportunities, so the browser cannot break it at all and the content extends past the container. Fix with
overflow-wrap: break-wordoroverflow-wrap: anywhereon the element holding the string. - Inline siblings being separated across lines. Two or more inline or flex children sit on the same row, and the browser puts them on different lines when space runs out. Fix on the parent with
white-space: nowrap(for inline content in a block parent) orflex-wrap: nowrapplusmin-width: 0on the children (for flex layouts).
The rest of this article works through the property-level fix for each case, plus the layout-level alternatives when text properties are not enough.
Using white-space: nowrap to Prevent Line Breaks
white-space: nowrap to Prevent Line Breakswhite-space: nowrap prevents the browser from wrapping text inside an element to a new line, regardless of container width. Use it when the entire text node should stay on one line.
Syntax and Basic Usage
white-space accepts six keywords that each define a different mix of collapsing sequences, preserving characters, and allowing wraps. The property controls how white space and line breaks in the source are handled.
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
Each keyword does the following:
normal: collapse sequences of white space, and wrap as needed.nowrap: collapse white space, but suppress line wrapping inside the element.pre: preserve white space and line breaks from the source; no wrapping except at newline characters.pre-wrap: preserve white space and line breaks, and wrap when needed to avoid overflow.pre-line: collapse white space, preserve source newlines, and wrap when needed.break-spaces: likepre-wrap, but any white space at the end of a line can create a break opportunity.
Preventing Line Breaks in a <span> Element
Apply white-space: nowrap to the span that must stay on one line. Wrap a phone number, product code, or other token in a span, then freeze wrapping on that span.
<p>Call us at <span class="no-break">(555) 123-4567</span> today.</p>
.no-break {
white-space: nowrap;
}
Preventing Line Breaks in Navigation List Items
Set white-space: nowrap on each li or a so menu labels do not wrap inside the item. Keep each label intact on narrow viewports by targeting the list item or the anchor.
<ul class="site-nav">
<li><a href="/docs">Documentation</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact sales</a></li>
</ul>
.site-nav li,
.site-nav a {
white-space: nowrap;
}
Preventing Line Breaks Between an Inline Image and Its Label
Wrap the icon and its label in a single inline element and apply white-space: nowrap to that wrapper so the pair never splits across lines.
<p>Status: <span class="status"><img src="/img/check.svg" alt="" width="16" height="16"> Verified</span></p>
.status {
white-space: nowrap;
}
The inline image and the word “Verified” stay together on the same line even when the surrounding paragraph wraps.
When white-space: nowrap Is the Right Choice
Reach for nowrap when the string is short, user-authored, or an identifier that must read as one unit. It fits table cells that should not split, badges, and any element where you accept horizontal overflow or pair it with truncation. It is less appropriate for long prose, where forcing one line harms readability unless you also clip or scroll.
Using overflow-wrap to Control Word-Level Breaking
overflow-wrap to Control Word-Level Breakingoverflow-wrap controls whether the browser may break inside an otherwise unbreakable string to prevent overflow. It does not remove spaces as wrap points; it adds extra break opportunities when needed.
overflow-wrap: normal vs. overflow-wrap: break-word vs. overflow-wrap: anywhere
normal keeps breaks at standard wrap opportunities only, break-word adds permission to split long tokens to avoid overflow, and anywhere does the same thing visually but also lets the browser count those break points when sizing the parent.
The anywhere value matters in flex and grid layouts. The browser computes a min-content size for each item to decide how much it can shrink. With break-word, that calculation ignores the new break opportunities, so a flex item containing a long URL still reports a wide min-content and refuses to shrink. With anywhere, the calculation includes the break opportunities, so the item shrinks to fit. Use break-word for plain text in static containers, and anywhere for text inside flex or grid items that should never blow out their parent.
Practical Example With Long Unbreakable Strings
The two boxes below render the same long URL. The first uses overflow-wrap: normal and overflows; the second uses overflow-wrap: break-word and stays inside the container.
<p class="wrap-normal">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>
<p class="wrap-break">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>
.wrap-normal {
overflow-wrap: normal;
max-width: 220px;
border: 1px solid #ccc;
}
.wrap-break {
overflow-wrap: break-word;
max-width: 220px;
border: 1px solid #ccc;
}
overflow-wrap was previously named word-wrap. Browsers still accept word-wrap as an alias, but prefer overflow-wrap in new stylesheets.
Using word-break to Prevent Hyphen and Character-Level Breaks
word-break to Prevent Hyphen and Character-Level Breaksword-break controls how breaks occur inside words, including in CJK content, while the hyphens property controls automatic hyphenation breaks. Together they fine-tune behavior when standard spaces are not enough.
word-break: keep-all and When to Use It
word-break: keep-all blocks the browser from breaking inside words for CJK text, and word-break: break-all lets it break between any two characters in any script. Use keep-all for Chinese, Japanese, or Korean content where mid-word breaks read as errors. Use break-all for dense Latin-script tokens such as commit hashes, base64 strings, or generated identifiers in narrow table cells, where forced wrapping is preferable to overflow.
<p class="hash">a3f5b8e2c9d7f4a1b6e8d2c5f9a3b7e1d4c8f2a5b9e3c7d1f4a8b2e5c9d3f6a0</p>
.hash {
word-break: break-all;
max-width: 240px;
font-family: monospace;
border: 1px solid #ddd;
padding: 0.5rem;
}
The hash now wraps at arbitrary character positions and stays inside the container. Without word-break: break-all, the same string would extend past the right edge.
Preventing Hyphen Line Breaks With the hyphens Property
hyphens controls automatic hyphenation across three modes: none suppresses it, manual activates it only at soft hyphens you place in the markup, and auto lets the browser hyphenate according to language rules.
To turn hyphenation off entirely, set both the prefixed and unprefixed properties:
.no-hyphenation {
-webkit-hyphens: none;
hyphens: none;
}
To hyphenate only at positions you choose, insert soft hyphens (­) in the markup and use hyphens: manual:
<p class="manual-hyphens">extra­ordinary docu­mentation</p>
.manual-hyphens {
-webkit-hyphens: manual;
hyphens: manual;
}
The browser breaks at the soft hyphen positions only when the line runs out of width, and the soft hyphens are invisible otherwise.
To enable browser-driven hyphenation, declare a language and set hyphens: auto:
<article lang="en">
<p class="auto-hyphens">Antidisestablishmentarianism is a notably long English word.</p>
</article>
.auto-hyphens {
-webkit-hyphens: auto;
hyphens: auto;
}
hyphens: auto does nothing without a lang attribute on the element or its ancestor (the <html> root is the conventional place). The browser uses the declared language to load its hyphenation dictionary; without a language, it has no rules to apply. Coverage is also language-dependent: English, German, French, and Spanish are widely supported, while smaller languages may not be.
Using Flexbox to Prevent Line Breaks Between Elements
flex-wrap: nowrap on a flex container forces all flex children onto a single line. That is the right control when several items share a row and should not drop to the next line.
flex-wrap: nowrap for Inline Element Groups
nowrap is the initial value for flex-wrap, so a flex container keeps its children on one line by default. When items no longer fit, they shrink, overflow, or scroll depending on flex-shrink, min-width, and the parent’s overflow.
The most common flex overflow bug is unrelated to flex-wrap. Flex items have a min-width: auto default, which prevents them from shrinking below their content’s intrinsic size. When a flex child contains a long word or URL, the child refuses to shrink and pushes the parent wider than the viewport. Set min-width: 0 (and often overflow: hidden) on the flex child to let it shrink. This is the fix for “my flexbox layout overflows on mobile” in roughly nine out of ten cases.
.flex-child-shrinks {
min-width: 0;
overflow: hidden;
}
Practical Navigation Bar Example With Flexbox
A horizontal ul with display: flex, flex-wrap: nowrap, and gap keeps every link on one row while spacing items evenly.
<nav aria-label="Primary">
<ul class="nav-row">
<li><a href="/">Home</a></li>
<li><a href="/product">Product</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/support">Support</a></li>
</ul>
</nav>
.nav-row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
Using CSS Grid to Keep Elements on One Line
A single-row CSS Grid layout keeps grid items on one line by defining one row track and as many column tracks as items. Use it when you want column alignment without flex main-axis shrink rules.
Single-Row Grid Layout to Prevent Wrapping
grid-auto-flow: column with grid-auto-columns: max-content builds a single row of as many columns as items. Reach for grid over flex when you want every item to size to its own content without the main-axis shrink rules of flexbox.
A breadcrumb row is a typical use case. Each crumb is its own column, and the row never wraps even on narrow viewports:
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="/">Home</a>
<span aria-hidden="true">/</span>
<a href="/community">Community</a>
<span aria-hidden="true">/</span>
<a href="/community/tutorials">Tutorials</a>
<span aria-hidden="true">/</span>
<span aria-current="page">Prevent line breaks</span>
</nav>
.breadcrumb {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 0.5rem;
overflow-x: auto;
}
When the row is wider than the viewport, overflow-x: auto adds a horizontal scrollbar instead of wrapping crumbs onto a second line.
If you always have a fixed number of items, pin the column count with repeat:
.fixed-row {
display: grid;
grid-template-columns: repeat(4, max-content);
column-gap: 0.75rem;
}
max-content keeps each column sized to its own content, so the row never expands past what the items need.
Combining text-overflow With overflow: hidden for Single-Line Truncation
text-overflow With overflow: hidden for Single-Line TruncationSingle-line ellipsis truncation requires three properties together: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. Omit any one of them and the ellipsis will not appear as expected.
The Three-Property Pattern: white-space, overflow, text-overflow
All three declarations are required because each one solves a different part of the ellipsis problem. white-space: nowrap keeps the text on a single line so the browser can measure overflow correctly. overflow: hidden clips anything past the box edge. text-overflow: ellipsis replaces the clipped portion with an ellipsis character sequence. Widen the container and the full text returns; narrow it and the tail is hidden.
Code Example With Ellipsis Truncation
Apply white-space: nowrap, overflow: hidden, and text-overflow: ellipsis to the title element inside a width-limited card.
<article class="card">
<h2 class="card-title">
Quarterly design review notes from the entire product team
</h2>
</article>
.card {
max-width: 280px;
border: 1px solid #ddd;
padding: 1rem;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Truncating Text to Multiple Lines With -webkit-line-clamp
-webkit-line-clampFor multi-line truncation with a trailing ellipsis (two lines, three lines, N lines), combine display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N, and overflow: hidden. The prefixed -webkit-box model is the only widely supported way to clamp text to multiple lines today.
<article class="card">
<h2 class="card-title">Quarterly design review notes</h2>
<p class="card-summary">
The product team reviewed the new dashboard layout, the migration plan
for the legacy admin console, and the rollout schedule for the next two
quarters. Several action items were assigned for follow-up next week.
</p>
</article>
.card {
max-width: 320px;
border: 1px solid #ddd;
padding: 1rem;
}
.card-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
The summary clamps to three lines and ends with an ellipsis automatically. Change -webkit-line-clamp to set a different line count.
The unprefixed line-clamp property and a non-prefixed clamping mechanism are progressing through the CSS Overflow specification, and modern browsers are starting to support them. Until coverage is universal, ship the -webkit- prefixed pattern above and treat the unprefixed line-clamp as an optional unprefixed follow-up when browser support allows it.
Accessibility Note for Truncated Text
Both single-line and multi-line truncation hide visual text but keep the full text in the accessibility tree, which means screen readers still read the complete content. That is usually the desired behavior, but it has consequences. If the truncated element is a link or a button, the accessible name will not match what a sighted user sees. For long titles in cards, give the element a title attribute, or render the full text in a tooltip on focus and hover, so keyboard and pointer users can recover the hidden text.
CSS Property Comparison Table
The table below summarizes the properties covered in this tutorial and the scenario each one solves.
| Property | Purpose | Common Values | Notes and Gotchas |
|---|---|---|---|
white-space |
Collapse or preserve spaces and control whether lines wrap | normal, nowrap, pre, pre-wrap, pre-line, break-spaces |
Widely supported. Does not stop a long unbreakable string from overflowing; pair with overflow-wrap when content is unbounded. |
overflow-wrap |
Allow breaks inside long tokens to avoid overflow | normal, anywhere, break-word |
Widely supported. break-word and anywhere look identical visually but differ in min-content size, which matters for flex and grid items. |
word-break |
Tune breaks inside words, especially for CJK | normal, break-all, keep-all |
Widely supported. The deprecated word-break: break-word is a separate value that was removed; use overflow-wrap: break-word instead. |
hyphens |
Control automatic hyphenation | none, manual, auto |
Safari requires the -webkit-hyphens prefix. hyphens: auto does nothing without a lang attribute on the element or <html>. |
flex-wrap |
Decide whether flex items wrap to new lines | nowrap, wrap, wrap-reverse |
Widely supported. nowrap is the default. The classic mobile overflow bug is min-width: auto on flex children, not flex-wrap itself. |
text-overflow |
Style overflowed text when it is clipped | clip, ellipsis, string values |
Widely supported. Requires overflow: hidden (or overflow: scroll) and white-space: nowrap on the same element to render the ellipsis. |
For up-to-date per-property compatibility tables, refer to MDN Web Docs.
Choosing the Right Technique for Your Use Case
The right property depends on whether you are controlling wrapping inside a single element or across a group of elements. Match the tool to the part of the tree you can style.
Decision Guide by Element Type and Context
Start from the element you control, then match it to the property in this list.
- Single line of text inside one element:
white-space: nowrap. - Single-line preview with a trailing ellipsis:
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsistogether. - Multi-line preview with a trailing ellipsis (2, 3, or N lines):
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: N, andoverflow: hidden. - Long URL or hash overflowing a card or table cell in static layout:
overflow-wrap: break-word. - Long URL or hash inside a flex or grid item that refuses to shrink:
overflow-wrap: anywhereon the text element, plusmin-width: 0on the flex or grid child. - Navigation links that should never wrap to a second row:
flex-wrap: nowrapon the parent container, withmin-width: 0on the children if any contain long text. - Suppressing automatic hyphenation:
hyphens: noneplus-webkit-hyphens: none. - Enabling browser-driven hyphenation:
hyphens: autoplus-webkit-hyphens: auto, and alangattribute on the element or<html>root. - CJK content where breaks inside words are undesirable:
word-break: keep-all. - Dense Latin-script tokens (hashes, base64) in narrow containers:
word-break: break-all.
Frequently Asked Questions
What is the simplest CSS property to prevent a line break on a single line of text?
The simplest choice is white-space: nowrap, which stops the browser from inserting line breaks inside that element’s text. Pair it with width constraints or truncation if you also need to manage overflow.
How do I prevent a line break between two inline elements like <span> tags?
Wrap both spans in a parent and set white-space: nowrap on that parent, or make the parent display: flex with flex-wrap: nowrap so the children share one flex line. Either approach keeps the pair from splitting across lines.
What is the difference between white-space: nowrap and overflow: hidden?
white-space: nowrap decides whether text may wrap to additional lines inside the element. overflow: hidden clips any content that extends past the padding edge. They address different questions and are often combined with text-overflow: ellipsis for clipped single-line labels.
How do I prevent CSS from adding a hyphen when breaking a long word across lines?
Set hyphens: none on the element that should not show automatic hyphens, and pair it with -webkit-hyphens: none for current Safari. Confirm you are not forcing breaks with word-break: break-all, and give the element a definite width so wrapping behavior is predictable.
How do I prevent list items in a navigation menu from wrapping to a second line?
Apply white-space: nowrap to each li or a, or set the ul to display: flex with flex-wrap: nowrap and spacing via gap or margins. Both patterns keep labels on one row until you explicitly allow wrapping.
Does white-space: nowrap work on block-level elements like <div>?
Yes. white-space applies to any element; on a block box it still affects how its text wraps internally. The block may span the full width of its container unless you set a width, so plan for horizontal overflow or truncation when the text is long.
What CSS property prevents line breaks between flex children?
Set flex-wrap: nowrap on the flex container. That value is the flexbox default, so children stay on one line until you opt into flex-wrap: wrap.
Which approach should I use to prevent line breaks in a responsive layout?
Use flex-wrap: nowrap on row layouts when items must stay on one line, and add overflow: auto or overflow: hidden on the container if the row can exceed the viewport. For text-only previews, combine white-space: nowrap with overflow: hidden and text-overflow: ellipsis, and use overflow-wrap: break-word where long tokens would otherwise spill out of cards.
Conclusion
This article walked through white-space, overflow-wrap, word-break, hyphens, flex-wrap, and text-overflow, and connected each property to the diagnosis it solves: text wrapping inside one element, a long unbreakable string overflowing a container, or inline siblings being separated across lines. It also covered single-line and multi-line ellipsis truncation, the min-width: 0 rule for shrinking flex children, the lang attribute requirement for hyphens: auto, and the min-content distinction between overflow-wrap: break-word and overflow-wrap: anywhere.
You can now diagnose a wrapping problem from its visual symptom, choose the property that targets the cause, and combine text-level and layout-level fixes when one property is not enough. You can also recognize the common bugs that look like CSS problems but are really sizing problems, such as a flex child refusing to shrink because of its default min-width: auto.
To go deeper on related topics, read Wrapping and breaking text on MDN, A CSS Flexbox Cheatsheet, Introduction to CSS Grid, and How To Work with the Box Model in CSS. For browser compatibility data on any property in this article, refer to MDN Web Docs.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
About the author(s)
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
Supporting the open-source community one tutorial at a time. Former Technical Editor at DigitalOcean. Expertise in topics including Ubuntu 22.04, Ubuntu 20.04, CentOS, and more.
Building future-ready infrastructure with Linux, Cloud, and DevOps. Full Stack Developer & System Administrator. Technical Writer @ DigitalOcean | GitHub Contributor | Passionate about Docker, PostgreSQL, and Open Source | Exploring NLP & AI-TensorFlow | Nailed over 50+ deployments across production environments.
Still looking for an answer?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and AI-native businesses
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Start building today
From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.
