How to Prevent Line Breaks and Control Text Wrapping With CSS
Web browsers normally wrap text so that content remains within its container. In some situations, however, you may need a text string or a group of inline elements to remain on a single line. Common examples include navigation links, button text, code identifiers, table cells, and one-line previews that use truncation. CSS provides several properties for handling these situations, including white-space, overflow-wrap, word-break, hyphens, flex-wrap, and text-overflow.
This tutorial explains each property with practical examples, shows how to combine them for single-line truncation with an ellipsis, and compares text-based CSS rules with layout-based solutions using flexbox and CSS Grid. By the end, you will understand which property is suitable for different situations, including text inside a <span>, navigation list items, long strings such as URLs, and flex children that must remain on one line.
Key Takeaways
- Use
white-space: nowrapfirst when a single element must never wrap. If its content may become wider than its container, combine it withoverflow: hiddenoroverflow: autoso that the entire page does not develop unwanted horizontal scrolling. - Use
overflow-wrap: break-wordfor long URLs, hashes, and tokens inside elements such as cards or table cells. Preferoverflow-wrap: anywherewhen the same text appears inside a flex or grid child becauseanywherereduces the element’smin-contentsize and helps prevent the parent container from being stretched. - Single-line truncation requires three properties together:
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsis. If any one of these declarations is missing, the ellipsis will not work as intended. - For truncating content to two, three, or any other number of lines with an ellipsis, use
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: N, andoverflow: hidden. The modernline-clampshorthand is becoming available, but the prefixed technique continues to provide broader compatibility. flex-wrap: nowrapis already the default value in flexbox, but it does not solve overflow by itself. Flex children containing long text should generally receivemin-width: 0; otherwise, they may refuse to shrink below their intrinsic content width and overflow their container.hyphens: autorequires alangattribute on the element or on the<html>root. Safari also requires the-webkit-hyphensprefix. Withhyphens: manual, breaks occur only at explicit­soft hyphens that have been added to the markup.- Select a property according to the level you need to control.
white-space,overflow-wrap,word-break, andhyphensoperate on text within an individual element, whileflex-wrapand grid track sizing control the layout relationship between multiple elements.
Prerequisites
To follow this tutorial, you will need:
- A code editor of your choice, such as
nanoor Visual Studio Code - A web browser
- Basic familiarity with HTML fundamentals. An introductory HTML tutorial can help if you need a review of the basics.
What Causes Unwanted Line Breaks in CSS
Unexpected line breaks usually come from one of three causes, and each cause requires a different solution. Identify the source of the problem before choosing a CSS property.
- Text wrapping inside one element. The element is narrower than its content, so the browser wraps the text at the nearest available space. Apply
white-space: nowrapdirectly to the element. If necessary, combine it withoverflowandtext-overflowto truncate overflowing content. - A long string with no available breaking points. A URL, hash, or generated token may contain no natural wrapping opportunities, causing it to extend beyond its container. Apply
overflow-wrap: break-wordoroverflow-wrap: anywhereto the element containing the string. - Sibling elements moving onto separate lines. Multiple inline or flex items may begin on the same row but separate when available space becomes limited. For inline content inside a block parent, use
white-space: nowrapon the parent. For a flex layout, useflex-wrap: nowrapand applymin-width: 0to the relevant children.
The following sections examine the property-level solution for each case and also cover layout-level alternatives for situations where text properties alone are insufficient.
Using white-space: nowrap to Prevent Line Breaks
The white-space: nowrap declaration prevents a browser from wrapping text inside an element onto another line, regardless of the element’s available width. Use this option when the complete text node must remain on one line.
Syntax and Basic Usage
The white-space property accepts six keywords. Each keyword determines how sequences of spaces are collapsed or preserved, how source line breaks are treated, and whether automatic wrapping is allowed.
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
The values work as follows:
normal: Collapses consecutive white-space characters and allows wrapping whenever necessary.nowrap: Collapses white space while preventing automatic line wrapping inside the element.pre: Preserves source white space and line breaks and does not wrap except where newline characters already exist.pre-wrap: Preserves white space and source line breaks while also allowing wrapping when required to avoid overflow.pre-line: Collapses sequences of white space, retains source newline characters, and permits wrapping where necessary.break-spaces: Behaves similarly topre-wrap, but white space at the end of a line can also become a wrapping opportunity.
Preventing Line Breaks in a <span> Element
Add white-space: nowrap to a span when the content inside that span must remain together. For example, a phone number, product identifier, or another short token can be wrapped in a span and prevented from breaking.
<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
Apply white-space: nowrap to individual li or a elements so navigation labels do not split across multiple lines. Targeting either the list item or its anchor keeps each menu label intact when the available viewport width becomes smaller.
<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
Place an icon and its related text inside the same inline wrapper and apply white-space: nowrap to that wrapper. This keeps the image and label together instead of allowing the browser to place them on separate 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” remain together on a single line even if the rest of the surrounding paragraph wraps.
When white-space: nowrap Is the Right Choice
Use nowrap when you are dealing with a short string, user-provided value, or identifier that needs to be read as one complete unit. It is useful for table cells that should not split, badges, and other elements where horizontal overflow is acceptable or is handled through truncation. It is generally a poor choice for long prose because forcing a large amount of text onto one line reduces readability unless the content is clipped or made horizontally scrollable.
Using overflow-wrap to Control Word-Level Breaking
The overflow-wrap property determines whether a browser is allowed to break inside a string that would otherwise have no valid breaking point. It does not remove existing spaces as normal wrapping opportunities. Instead, it introduces additional break positions when they are necessary to prevent overflow.
overflow-wrap: normal vs. overflow-wrap: break-word vs. overflow-wrap: anywhere
The normal value limits line breaks to standard wrapping opportunities. The break-word value allows the browser to split long tokens when necessary to avoid overflow. The anywhere value produces similar visual wrapping but also allows those additional break points to influence how the browser calculates the size of the parent layout.
The distinction is especially important in flexbox and CSS Grid. Browsers calculate a min-content size for each item when determining how far an element is allowed to shrink. With break-word, the additional wrapping points are ignored during that calculation. As a result, a flex item containing a long URL can still report a large min-content width and resist shrinking. With anywhere, those break positions are included in the calculation, which allows the item to become narrower. Use break-word for normal text inside static containers and anywhere for text inside flex or grid items that must remain within their parent.
Practical Example With Long Unbreakable Strings
The following two elements contain the same long URL. The first uses overflow-wrap: normal and may overflow its container. The second uses overflow-wrap: break-word, allowing the URL to remain within the available width.
<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;
}
The overflow-wrap property was previously called word-wrap. Browsers continue to recognize word-wrap as an alias, but overflow-wrap is the preferred property for new CSS.
Using word-break to Control Hyphen and Character-Level Breaks
The word-break property determines how line breaks can occur within words, including text written in CJK scripts. The hyphens property separately controls automatic hyphenation. Together, these properties provide more precise behavior in situations where normal spaces do not offer sufficient wrapping opportunities.
word-break: keep-all and When to Use It
The word-break: keep-all declaration prevents browsers from breaking inside words in CJK text. In contrast, word-break: break-all allows a break between essentially any two characters. Use keep-all for Chinese, Japanese, or Korean text when internal word breaks would be inappropriate. Use break-all for compact Latin-script values such as commit hashes, Base64 strings, or generated identifiers displayed inside narrow table cells where 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 can now wrap at arbitrary character positions while staying inside its container. Without word-break: break-all, the same value could extend beyond the right edge.
Preventing Hyphen Line Breaks With the hyphens Property
The hyphens property supports three primary modes. The none value disables automatic hyphenation, manual allows breaks only at soft hyphens explicitly included in the markup, and auto lets the browser insert hyphenation according to the rules of the declared language.
To disable hyphenation completely, use both the prefixed and unprefixed declarations:
.no-hyphenation {
-webkit-hyphens: none;
hyphens: none;
}
If you want words to break only at positions you define, insert soft hyphens using ­ and set hyphens: manual:
<p class="manual-hyphens">extra­ordinary docu­mentation</p>
.manual-hyphens {
-webkit-hyphens: manual;
hyphens: manual;
}
The browser uses the specified soft-hyphen locations only when there is not enough horizontal space. When no break is required, the soft hyphens remain invisible.
To let the browser perform language-aware automatic hyphenation, specify a language and apply 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;
}
The hyphens: auto declaration does not work without a lang attribute on the element itself or on one of its ancestors. The <html> root is the conventional place for the page language. Browsers use the declared language to determine the appropriate hyphenation rules. Without that language information, there are no linguistic rules to apply. Browser coverage also depends on the language. Languages such as English, German, French, and Spanish generally have broad support, while less widely supported languages may have more limited hyphenation dictionaries.
Using Flexbox to Prevent Line Breaks Between Elements
Applying flex-wrap: nowrap to a flex container keeps all of its flex children on a single flex line. This is the appropriate layout-level control when several elements share one row and should not move onto a second line.
flex-wrap: nowrap for Inline Element Groups
The nowrap value is the initial value of flex-wrap, meaning a flex container already keeps its children on one line unless another value is specified. When the items cannot fit, their final behavior depends on settings such as flex-shrink, min-width, and the parent’s overflow value. They may shrink, overflow, or become scrollable.
A frequent flexbox overflow issue is not caused by flex-wrap itself. Flex items use min-width: auto by default, which can prevent them from shrinking below the intrinsic width of their content. If a flex child contains a long word or URL, the item may resist shrinking and force its parent to become wider than the viewport. Apply min-width: 0, and often overflow: hidden, to the flex child so that it can shrink. This is one of the most common solutions for flex layouts that overflow on small screens.
.flex-child-shrinks {
min-width: 0;
overflow: hidden;
}
Practical Navigation Bar Example With Flexbox
A horizontal ul using display: flex, flex-wrap: nowrap, and gap can keep all navigation links in one row while maintaining consistent spacing between the items.
<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 can keep grid items on one horizontal line by creating one row and as many column tracks as necessary. This approach is useful when you need column-oriented alignment without relying on flexbox’s main-axis shrinking behavior.
Single-Row Grid Layout to Prevent Wrapping
Using grid-auto-flow: column together with grid-auto-columns: max-content creates one row containing as many columns as there are items. Grid can be preferable to flexbox when each element should size itself according to its own content without flexbox’s main-axis shrink calculations.
A breadcrumb trail is a common example. Every breadcrumb occupies its own column, and the row remains on one line even when the viewport becomes narrow:
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="/">Home</a>
<span aria-hidden="true">/</span>
<a href="/resources">Resources</a>
<span aria-hidden="true">/</span>
<a href="/resources/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;
}
If the breadcrumb row becomes wider than the viewport, overflow-x: auto provides horizontal scrolling rather than allowing the breadcrumb items to wrap onto another line.
When the number of items is always fixed, you can explicitly define the number of columns with repeat:
.fixed-row {
display: grid;
grid-template-columns: repeat(4, max-content);
column-gap: 0.75rem;
}
The max-content value sizes each column according to its own content, keeping the row limited to the amount of horizontal space required by its items.
Creating an ellipsis for a single line requires three CSS declarations used together: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. Leaving out any one of these properties prevents the ellipsis pattern from behaving as expected.
The Three-Property Pattern: white-space, overflow, and text-overflow
Each of the three declarations handles a different part of the truncation process. white-space: nowrap forces the text onto one line so that the browser can determine horizontal overflow. overflow: hidden clips content that extends beyond the box. text-overflow: ellipsis displays an ellipsis where the clipped portion begins. If the container becomes wider, more or all of the text becomes visible. If it becomes narrower, additional content is hidden.
Code Example With Ellipsis Truncation
Apply the three declarations to a title inside a card or another element with limited width.
<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
For text that should be limited to two, three, or another specific number of lines with a trailing ellipsis, combine display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N, and overflow: hidden. The prefixed -webkit-box approach remains the most widely supported technique for clamping text to multiple lines.
<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 is limited to three lines and receives an ellipsis automatically. Change the value of -webkit-line-clamp when a different number of visible lines is required.
The unprefixed line-clamp property and a non-prefixed clamping mechanism continue to progress through the CSS Overflow specification, while modern browsers are gradually adding support. Until browser coverage becomes universal, the -webkit- prefixed pattern remains useful as the primary implementation, with the unprefixed line-clamp declaration serving as an optional addition where browser support permits it.
Accessibility Note for Truncated Text
Both single-line and multi-line truncation hide part of the text visually while usually leaving the complete text available in the accessibility tree. Screen readers can therefore continue to read the full content. This is often desirable, but it can also create differences between what assistive technology announces and what a sighted user sees. If a truncated element is a link or button, its accessible name may contain more text than is visibly displayed. For long card titles, you can provide a title attribute or expose the full text in a tooltip on focus and hover so that keyboard and pointer users can access the hidden content.
CSS Property Comparison Table
The following table summarizes the CSS properties discussed in this tutorial and the type of problem each property addresses.
| Property | Purpose | Common Values | Notes and Gotchas |
|---|---|---|---|
white-space |
Controls the collapsing or preservation of spaces and determines whether lines can wrap | normal, nowrap, pre, pre-wrap, pre-line, break-spaces |
Widely supported. It does not by itself prevent a long string with no break opportunities from overflowing, so combine it with overflow-wrap when content length is unpredictable. |
overflow-wrap |
Allows line breaks inside long tokens in order to prevent overflow | normal, anywhere, break-word |
Widely supported. break-word and anywhere generally look the same visually, but they affect min-content sizing differently, which is important for flex and grid layouts. |
word-break |
Controls breaking inside words, particularly for CJK content | normal, break-all, keep-all |
Widely supported. The deprecated word-break: break-word value is separate and should be replaced with overflow-wrap: break-word. |
hyphens |
Controls automatic and manual hyphenation | none, manual, auto |
Safari requires the -webkit-hyphens prefix. hyphens: auto requires a lang attribute on the element or the <html> element. |
flex-wrap |
Determines whether flex items can move onto additional flex lines | nowrap, wrap, wrap-reverse |
Widely supported. nowrap is the default value. Many mobile flex overflow problems are caused by the default min-width: auto behavior of flex children rather than by flex-wrap. |
text-overflow |
Controls how clipped overflowing text is visually represented | clip, ellipsis, string values |
Widely supported. An ellipsis normally requires overflow: hidden or overflow: scroll together with white-space: nowrap on the same element. |
For current compatibility information for individual CSS properties, refer to MDN Web Docs.
Choosing the Right Technique for Your Use Case
The correct property depends on whether you need to control wrapping within one element or the positioning of multiple elements. Start with the part of the document structure that you can style, then select the property that operates at that level.
Decision Guide by Element Type and Context
Begin with the type of element and the behavior you need, then choose the matching CSS technique:
- For one line of text inside a single element, use
white-space: nowrap. - For a one-line preview ending with an ellipsis, combine
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsis. - For a multi-line preview ending with an ellipsis after two, three, or another number of lines, use
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: N, andoverflow: hidden. - For a long URL or hash that overflows a card or table cell in a static layout, use
overflow-wrap: break-word. - For a long URL or hash inside a flex or grid item that refuses to shrink, apply
overflow-wrap: anywhereto the text andmin-width: 0to the relevant flex or grid child. - For navigation links that must remain on a single row, apply
flex-wrap: nowrapto the parent. If any child contains lengthy content, usemin-width: 0on those children as needed. - To disable automatic hyphenation, use
hyphens: nonetogether with-webkit-hyphens: none. - To enable browser-controlled hyphenation, use
hyphens: autotogether with-webkit-hyphens: autoand specify alangattribute on the element or on the<html>root. - For CJK text where breaks within words should be avoided, use
word-break: keep-all. - For dense Latin-script strings such as hashes or Base64 values inside narrow containers, use
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 option is white-space: nowrap. It prevents the browser from inserting automatic line breaks into the text inside that element. If overflow also needs to be controlled, combine the property with an appropriate width restriction, scrolling, or truncation technique.
How Do I Prevent a Line Break Between Two Inline Elements Like <span> Tags?
Place both spans inside a shared parent element and apply white-space: nowrap to that parent. Another option is to make the parent a flex container with display: flex and flex-wrap: nowrap. Either method prevents the two child elements from being separated onto different lines.
What Is the Difference Between white-space: nowrap and overflow: hidden?
The white-space: nowrap property determines whether text is allowed to wrap onto additional lines within an element. The overflow: hidden declaration determines what happens to content extending beyond the element’s padding edge and clips that content. They solve different problems and are frequently combined with text-overflow: ellipsis when creating shortened single-line labels.
How Do I Prevent CSS From Adding a Hyphen When Breaking a Long Word Across Lines?
Apply hyphens: none to the element that should not use automatic hyphenation and add -webkit-hyphens: none for Safari compatibility. Also make sure that word-break: break-all is not forcing character-level breaks, and give the element a defined width when predictable wrapping behavior is required.
How Do I Prevent List Items in a Navigation Menu From Wrapping to a Second Line?
You can apply white-space: nowrap to each li or a element. Alternatively, set the ul to display: flex with flex-wrap: nowrap and create spacing using gap or margins. Both approaches keep navigation labels on one row until wrapping is deliberately enabled.
Does white-space: nowrap Work on Block-Level Elements Like <div>?
Yes. The white-space property can be applied to any element. When used on a block-level element, it still determines how the text inside that block wraps. A block may occupy the full width of its parent unless another width is specified, so long content may require additional overflow handling or truncation.
What CSS Property Prevents Line Breaks Between Flex Children?
Use flex-wrap: nowrap on the flex container. This is already the default value for flexbox, so flex children remain on one line unless the layout explicitly enables flex-wrap: wrap.
Which Approach Should I Use to Prevent Line Breaks in a Responsive Layout?
Use flex-wrap: nowrap for horizontal layouts where items must stay together on one line, and add overflow: auto or overflow: hidden to the container if the complete row may become wider than the viewport. For text-only previews, combine white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. When long strings could otherwise extend outside a card or similar container, use overflow-wrap: break-word.
Conclusion
This tutorial examined white-space, overflow-wrap, word-break, hyphens, flex-wrap, and text-overflow, connecting each property with the type of wrapping issue it is designed to solve. These issues include text wrapping within a single element, a long unbreakable string extending outside its container, and neighboring inline elements being divided across multiple lines. It also covered single-line and multi-line ellipsis truncation, the importance of min-width: 0 for shrinking flex children, the lang requirement for hyphens: auto, and the min-content sizing difference between overflow-wrap: break-word and overflow-wrap: anywhere.
You can now identify a wrapping issue by its visible behavior, select the CSS property that directly addresses its cause, and combine text-level and layout-level techniques when a single declaration is insufficient. You can also recognize common issues that appear to be wrapping problems but are actually sizing problems, such as a flex child that refuses to shrink because its default value is min-width: auto.
