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.
white-space: nowrap first when one element should never wrap, but pair it with overflow: hidden or overflow: auto whenever the content can be longer than the container, otherwise the page itself will scroll horizontally.overflow-wrap: break-word for long URLs, hashes, and tokens inside cards or table cells. Choose overflow-wrap: anywhere instead when the same element is a flex or grid child, because anywhere reduces the item’s min-content size and prevents the parent from being stretched.white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. Drop any one and the ellipsis will not appear.display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N, and overflow: hidden. The modern line-clamp shorthand is shipping but the prefixed form still has the widest support.flex-wrap: nowrap is the flexbox default, but it does not stop overflow on its own. Set min-width: 0 on flex children that contain long text, otherwise the children refuse to shrink past their content size and overflow the container.hyphens: auto does nothing without a lang attribute on the element or the <html> root, and it requires Safari’s -webkit-hyphens prefix. hyphens: manual activates only at explicit ­ soft hyphens you have placed in the markup.white-space, overflow-wrap, word-break, and hyphens are text-level properties that act on one element’s content. flex-wrap and grid track sizing are layout-level properties that act on the relationship between siblings.To complete this tutorial, you will need:
nano or Visual Studio CodeUnwanted line breaks come from one of three causes, and each one has a different fix. Diagnose the cause first, then pick the property.
white-space: nowrap, optionally combined with overflow and text-overflow for truncation.overflow-wrap: break-word or overflow-wrap: anywhere on the element holding the string.white-space: nowrap (for inline content in a block parent) or flex-wrap: nowrap plus min-width: 0 on 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.
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.
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: like pre-wrap, but any white space at the end of a line can create a break opportunity.<span> ElementApply 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;
}
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;
}
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.
white-space: nowrap Is the Right ChoiceReach 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.
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: anywherenormal 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.
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.
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 Itword-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.
hyphens Propertyhyphens 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.
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 Groupsnowrap 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;
}
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;
}
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.
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.
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.
white-space, overflow, text-overflowAll 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.
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;
}
-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.
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.
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.
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.
Start from the element you control, then match it to the property in this list.
white-space: nowrap.white-space: nowrap, overflow: hidden, and text-overflow: ellipsis together.display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N, and overflow: hidden.overflow-wrap: break-word.overflow-wrap: anywhere on the text element, plus min-width: 0 on the flex or grid child.flex-wrap: nowrap on the parent container, with min-width: 0 on the children if any contain long text.hyphens: none plus -webkit-hyphens: none.hyphens: auto plus -webkit-hyphens: auto, and a lang attribute on the element or <html> root.word-break: keep-all.word-break: break-all.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.
<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.
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.
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.
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.
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.
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.
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.
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.
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。