white-space nowrap

Why Is My Button Wider Than the Screen on Mobile?

by

Button wider than screen on mobile problems usually happen when a button uses a fixed width, nowrap text, large padding, icons, flex rows, or a parent container that does not allow the button to shrink safely.

Mobile Button Overflow Fix

Why is my button wider than the screen on mobile?

A button wider than the screen on mobile can create horizontal scroll, cut off CTA text, push the page sideways, or make the layout feel broken. The button is usually not “randomly too big.” It is often being forced wide by a fixed width, white-space:nowrap, too much padding, an icon label combination, or a flex row that refuses to wrap.

Responsive Fixes CSS Fixes
  • Mobile CTA
  • Horizontal overflow
  • nowrap text
  • flex wrapping

What the bug looks like

A CTA button sticks out of the viewport, gets cut off, forces horizontal scrolling, or breaks a mobile hero section.

Why it happens

Desktop button assumptions are being reused on mobile: fixed width, nowrap text, oversized padding, or non-wrapping flex rows.

What usually fixes it

Use max-width:100%, fluid width, safe wrapping, smaller mobile padding, and responsive button groups.

Error 1

The button has a fixed desktop width

A fixed-width button can look perfect on desktop and still be wider than the mobile screen. If the viewport is 320px wide and the button is 360px wide, overflow is guaranteed.

Broken code

Fixed width 
.cta-button {
  width: 360px;
  padding: 14px 24px;
}

Broken visual result

Button overflows
wider than screen
Mobile hero

The button keeps a desktop width inside a narrow viewport.

Start Your Free Trial
A fixed width ignores the available mobile space.

Correct code

Fluid width cap 
.cta-button {
  width: min(100%, 360px);
  max-width: 100%;
  padding: 14px 20px;
}

Fixed visual result

Button respects screen
fits
Mobile hero

The button can shrink with the viewport instead of pushing past it.

Start Your Free Trial
width:min(100%, 360px) keeps the desktop cap while protecting mobile screens.
Error 2

white-space:nowrap forces long button text off-screen

white-space:nowrap is useful for short labels, but it becomes dangerous when the CTA text is long. On mobile, a long label may need to wrap or shorten.

Broken code

Text cannot wrap 
.cta-button {
  white-space: nowrap;
  padding-inline: 28px;
}

Broken visual result

Long label breaks layout
nowrap
Checkout section

The text stays on one line even when the screen cannot fit it.

Continue to Secure Checkout Now
The label refuses to wrap, so the button expands beyond the viewport.

Correct code

Safe text behavior 
.cta-button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding: 12px 18px;
}

Fixed visual result

Text can fit safely
safe text
Checkout section

The CTA can wrap cleanly without creating horizontal scroll.

Continue to Secure Checkout Now
For long CTAs, allow wrapping or use shorter mobile copy.
Error 3

The button group does not wrap on mobile

Sometimes one button is fine, but two buttons together create the overflow. A row with primary and secondary CTAs needs to wrap or stack on narrow screens.

Broken code

No wrapping 
.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.button {
  white-space: nowrap;
}

Broken visual result

CTA row overflows
row overflow
Hero actions

The button group stays in one row even when it cannot fit.

Get Started View Demo
The row refuses to wrap, so the combined button width becomes wider than the screen.

Correct code

Responsive button group 
.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button {
  flex: 1 1 160px;
  max-width: 100%;
}

@media (max-width: 480px) {
  .button {
    flex-basis: 100%;
  }
}

Fixed visual result

Buttons stack safely
wrapped
Hero actions

The buttons can wrap or stack instead of forcing horizontal overflow.

Get Started View Demo
A responsive button group lets the layout adapt instead of breaking the viewport.
Error 4

Icon, gap, and padding make the button wider than expected

A button label may fit by itself, but once you add an icon, a large gap, and big padding, the total width can overflow on mobile. The fix is to let the button shrink and wrap safely.

Broken code

Icon adds width 
.cta-button {
  display: inline-flex;
  gap: 14px;
  min-width: 310px;
  padding-inline: 28px;
  white-space: nowrap;
}

Broken visual result

Icon button overflows
too wide
App download

The icon, gap, padding, and text combine into a mobile overflow bug.

Download the mobile app
Small pieces of width add up quickly on a narrow screen.

Correct code

Shrink-safe icon button 
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  padding: 12px 18px;
}

.cta-button svg {
  flex: 0 0 auto;
}

Fixed visual result

Icon button fits
fits
App download

The icon stays stable, and the text can wrap inside the safe width.

Download the mobile app
Let the text wrap, keep the icon stable, and reduce mobile padding.
Premium pattern

A production-minded mobile button pattern

A reliable mobile button pattern protects the viewport, supports long text, handles icons, and lets button groups wrap without creating horizontal scroll.

Premium code

Responsive CTA system 
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: min(100%, 320px);
  max-width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
}

.cta-button svg {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-button {
    width: 100%;
    padding-inline: 16px;
  }
}

Premium visual result

CTA system fits the viewport
no overflow
Premium mobile hero

The button system handles long labels, icons, and small screens without creating horizontal scroll.

Start Your Free Trial Today View Product Demo
Premium button CSS is not about making every CTA tiny. It is about giving buttons safe rules for narrow screens.

Fast practical rule

If a button is wider than screen on mobile, first remove fixed width and white-space:nowrap. Then add max-width:100%, reduce mobile padding, and let button groups wrap or stack.

Debug checklist

  • Inspect the button width in DevTools and look for fixed values like width:360px.
  • Add max-width:100% to protect the viewport.
  • Check whether white-space:nowrap is forcing long text onto one line.
  • Reduce large mobile padding, especially padding-inline.
  • Check icons, gaps, and min-width values inside the button.
  • Make button groups wrap with flex-wrap:wrap or stack under a mobile breakpoint.
  • Inspect the parent container; the button may be revealing a larger overflow bug.
  • Test real CTA text, not only short placeholder labels like “Click.”
Best first move Add max-width:100% and remove fixed desktop width.
Most common cause A desktop CTA width or nowrap label is reused on mobile.
Most sneaky cause Icon + gap + padding + long text creates overflow even when the width looks normal.
Better mindset Buttons should protect the viewport before they protect the perfect desktop shape.

Related fixes that can help

A mobile button overflow bug often connects to page overflow, text overflow, responsive layout, container width, and navbar CTA problems.

Why is my page wider than the screen? If the button is creating or revealing horizontal overflow across the whole page. Read this fix
Horizontal scroll on mobile? If the button pushes the viewport sideways and creates mobile horizontal scroll. Read this fix
Why is my text overflowing outside the box in CSS? If the button label is the part that refuses to wrap or fit. Read this fix
Fix container width problems If the parent container is forcing the button into a layout that is already too wide. Read this fix
Why is my navbar wrapping to two lines? If the oversized button lives in a header or navbar CTA area. Read this fix
Fix responsive design not working If the button only breaks because mobile rules are missing or overridden. Read this fix

Final takeaway

A button wider than screen on mobile is usually caused by desktop button CSS being used in a narrow viewport. Fixed widths, nowrap text, large padding, icons, and non-wrapping flex rows can all push a CTA outside the screen.

Start by protecting the viewport with max-width:100%. Then make the text and button group responsive. A good mobile CTA can still look premium without forcing horizontal scroll.

Want more fixes like this?

Browse more mobile, overflow, and responsive CSS debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

Why Is My Navbar Wrapping to Two Lines?

by

Navbar wrapping to two lines usually happens when the logo, links, button, gap, padding, or fixed widths require more horizontal space than the header can provide.

Responsive Navbar Fix

Why is my navbar wrapping to two lines?

A navbar can look clean on desktop and suddenly wrap into two messy rows on smaller screens. The problem is usually not one mysterious CSS bug. It is a space budget problem: the logo, navigation links, CTA button, gap, padding, and fixed widths are asking for more room than the header has.

Responsive Fixes CSS Fixes
  • Navbar wrapping
  • Flexbox header
  • Mobile menu
  • Overflow control

What the bug looks like

The last link drops under the logo, the CTA button moves to a second row, or the whole header becomes taller than intended.

Why it happens

The navbar has more required width than the viewport or header container can safely hold.

What usually fixes it

Reduce the space budget, allow flexible items to shrink, hide secondary links earlier, or switch to a mobile menu sooner.

Error 1

The desktop navbar is allowed to wrap

Many headers use flexbox, but forget that flex items can wrap when the row runs out of room. That may sound harmless, but a two-line navbar usually looks broken and pushes the hero section down.

Broken code

Wraps into two rows 
.navbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.nav-links {
  display: flex;
  gap: 12px;
}

Broken visual result

Header becomes two lines
two rows
HomePricingDocsContact
Start
The header technically fits, but it no longer looks like a clean navbar.

Correct code

One row until breakpoint 
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  min-width: 0;
}

Fixed visual result

Clean single row
HomePricingDocsContact
Start
The row stays intentional, and secondary space is controlled before the layout collapses.
Error 2

The logo and CTA use too much fixed space

A navbar is a shared row. If the logo has a fixed width and the button also has a fixed width, the links are forced to fight for the remaining space. On smaller screens, something has to wrap, overflow, or disappear.

Broken code

Fixed widths everywhere 
.logo {
  width: 150px;
}

.nav-button {
  width: 130px;
}

.navbar {
  gap: 24px;
}

Broken visual result

No room left for links
too wide
ServicesAboutBlog
Get Started
The navbar breaks because fixed pieces consume the row before links have space.

Correct code

Flexible space budget 
.logo {
  max-width: clamp(84px, 18vw, 140px);
  flex: 0 1 auto;
}

.nav-button {
  flex: 0 0 auto;
  padding-inline: clamp(12px, 2vw, 18px);
}

.navbar {
  gap: clamp(8px, 2vw, 18px);
}

Fixed visual result

Space is shared
ServicesAboutBlog
Start
The logo, gap, and button scale down instead of forcing the links to a new line.
Error 3

The mobile menu breakpoint starts too late

A common mistake is waiting until 600px or 480px to show the mobile menu. But some desktop navbars stop fitting much earlier, especially when links are long or the logo is wide.

Broken code

Breakpoint too late 
@media (max-width: 480px) {
  .nav-links {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

Broken visual result

Desktop nav forced on mobile
too late
ProductsResourcesPricingSupport
The desktop menu remains visible after the row no longer has enough space.

Correct code

Switch before it breaks 
@media (max-width: 760px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}

Fixed visual result

Mobile menu appears earlier
☰
The menu switches before the desktop header becomes cramped and ugly.
Error 4

A hidden width problem makes the navbar wider than the screen

Sometimes the navbar wrapping is only a symptom. The real issue is that the header, container, logo, or menu has a fixed width that creates horizontal overflow. When that happens, the navbar can wrap and the whole page may become wider than the screen.

Broken code

Forced desktop width 
.header-inner {
  width: 1180px;
  margin-inline: auto;
}

.navbar {
  min-width: 900px;
}

Broken visual result

Header overflows viewport
overflow
HomeFeaturesPricingContact
Start
A fixed header width can cause both wrapping and horizontal scrolling.

Correct code

Fluid header width 
.header-inner {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.navbar {
  width: 100%;
  min-width: 0;
}

Fixed visual result

Fits the viewport
☰
The header can shrink with the screen instead of forcing a desktop layout on mobile.
Premium pattern

A production-minded navbar pattern

A strong navbar does not wait until it is already broken. It uses a fluid header container, smaller responsive gaps, flexible logo sizing, safe link behavior, and a mobile menu breakpoint that starts before the row wraps.

Premium code

Responsive navbar system 
.header-inner {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
  min-width: 0;
}

.logo {
  max-width: clamp(88px, 18vw, 150px);
  flex: 0 1 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  min-width: 0;
}

.nav-links a {
  white-space: nowrap;
}

.menu-button {
  display: none;
}

@media (max-width: 780px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}

Premium visual result

Switches before it breaks
HomeDocsPricing
☰
A premium navbar has a clear space budget and a breakpoint based on when the layout stops fitting, not on a random phone size.

Fast practical rule

If your navbar is wrapping to two lines, do not start by forcing smaller font sizes. First, check the total width of the logo, links, button, gaps, and header padding. Then decide whether the desktop navbar should compress or switch to a mobile menu earlier.

Debug checklist

  • Inspect the navbar width and compare it to the viewport width.
  • Check if the header container has a fixed width or large horizontal padding.
  • Reduce desktop gap values with clamp() or mobile breakpoints.
  • Make the logo responsive with max-width instead of a hard fixed width.
  • Give flexible areas min-width:0 so they can shrink when needed.
  • Hide nonessential links before the row starts wrapping.
  • Move to a hamburger or mobile menu at the width where the navbar actually breaks.
  • Check whether the navbar is also causing horizontal overflow on mobile.
Best first move Add up the space used by logo, links, button, gap, and padding. That usually reveals the bug.
Most common cause The desktop navbar stays active after it no longer fits the available width.
Most sneaky cause A fixed header container creates overflow, making the navbar look wrapped and broken.
Better mindset A navbar is a space-management system, not just a row of links.

Related fixes that can help

If your navbar wraps to two lines, the surrounding problem may involve responsive breakpoints, flexbox spacing, fixed containers, or mobile overflow.

Why is my responsive design not working? If the navbar only breaks at certain screen widths, your breakpoint strategy may be the real issue. Read this fix
Why is my page wider than the screen? If the navbar creates sideways scrolling, inspect fixed widths and overflow first. Read this fix
Why is my mobile menu not opening? If you switch to a hamburger menu and it does not work, the issue may be structure, class names, or z-index. Read this fix

Final takeaway

A navbar wrapping to two lines is usually a sign that the header has run out of horizontal space. The fix is not always to make everything smaller. The better fix is to control the space budget: responsive logo size, smaller gaps, fluid containers, flexible links, and a mobile menu breakpoint that starts before the desktop layout breaks.

Start by inspecting the navbar container and measuring what is consuming width. Once you know which piece is stealing space, the fix becomes much easier and the header stops feeling fragile across screen sizes.

Want more fixes like this?

Browse more responsive layout and CSS debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

Why Is My Button Text Wrapping Weirdly?

by

Button text wrapping weirdly usually happens when the button is too narrow, the text is forced to stay on one line, an icon row cannot shrink, or a button group has no responsive wrapping.

CSS Button Layout Fix

Why is my button text wrapping weirdly?

Button text can wrap in ugly ways: one word drops to a second line, an icon sits above the label, the button becomes too tall, or the text refuses to wrap and creates overflow. This usually happens when the button width, white-space rules, icon alignment, padding, or responsive button group is fighting the real text length.

Browse CSS Fixes Responsive Fixes
  • Button text wrapping
  • white-space bugs
  • Icon button layout
  • Responsive CTAs

What the bug looks like

Button words split badly, labels overflow, icons misalign, or a row of buttons breaks the card on mobile.

Why it happens

The button is using a width, spacing, or white-space rule that does not match the real text and available space.

What usually fixes it

Use flexible button sizing, sensible padding, correct wrapping rules, shrinkable text, and responsive button groups.

Error 1

The button has a fixed width that is too small

Fixed-width buttons often work with short labels, then break when the text becomes longer. The result is a label that wraps awkwardly inside a button that did not need to be that narrow.

Broken code

Too narrow 
.button {
  width: 150px;
  padding: 0 18px;
}

Broken visual result

Awkward line break
Checkout card

The button has enough text to need more room, but the fixed width forces ugly wrapping.

Continue to checkout
The button is not adapting to the real label length.

Correct code

Fluid button 
.button {
  width: 100%;
  max-width: 100%;
  padding: 12px 18px;
  text-align: center;
}

Fixed visual result

Label has room
Checkout card

The button can use the available card width instead of trapping the label in a narrow box.

Continue to checkout
The button now responds to the container instead of fighting it.
Error 2

white-space:nowrap makes the button overflow

white-space:nowrap can make short buttons look clean, but it becomes dangerous when text gets longer or the screen gets smaller. The text refuses to wrap, so the button or page may overflow.

Broken code

No wrapping allowed 
.button {
  max-width: 190px;
  white-space: nowrap;
}

Broken visual result

Text pushes outside
Mobile CTA

The button text refuses to wrap even when the available space gets tight.

Download complete beginner guide
No-wrap can turn a long label into a horizontal overflow bug.

Correct code

Controlled wrapping 
.button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

Fixed visual result

Text stays inside
Mobile CTA

The text can wrap when needed without escaping the container.

Download complete beginner guide
Let long labels wrap only when the layout needs it.
Error 3

The icon and label are fighting for space

Icon buttons can wrap strangely when the icon, gap, and text are all squeezed into a fixed width. The text needs permission to shrink and wrap without pushing the icon into a weird position.

Broken code

Rigid icon row 
.button {
  display: inline-flex;
  gap: 12px;
  width: 170px;
}

.button span {
  white-space: nowrap;
}

Broken visual result

Icon row gets cramped
Action button

The icon takes space, then the label has too little room to behave cleanly.

↗Open responsive preview
The icon and label are locked into a row that is too narrow.

Correct code

Shrinkable label 
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.button span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

Fixed visual result

Icon and label cooperate
Action button

The icon keeps its size while the label adapts to the available space.

↗Open responsive preview
The text can shrink and wrap without breaking the button row.
Error 4

The button group has no responsive wrapping

A single button may be fine, but two or three buttons in one row can break the card. Button groups need a responsive strategy: wrap, stack, or use flexible widths.

Broken code

No wrap group 
.button-group {
  display: flex;
  gap: 10px;
}

.button-group .button {
  width: 180px;
}

Broken visual result

Button row overflows
Plan card

The button row keeps demanding desktop space inside a smaller container.

Start now Compare plans
The group has no permission to wrap or adapt when the card gets narrow.

Correct code

Responsive group 
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-group .button {
  flex: 1 1 160px;
  min-width: 0;
}

Fixed visual result

Buttons adapt
Plan card

The group can wrap or share space instead of forcing the parent wider.

Start now Compare plans
A responsive group lets buttons adapt before they break the layout.
Premium pattern

A production-minded button text pattern

A stronger button pattern starts flexible, supports icons, handles long labels, and behaves predictably inside cards, grids, and mobile layouts.

Premium code

Flexible CTA system 
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.button__label {
  min-width: 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.button-group > .button {
  flex: 1 1 180px;
}

Premium visual result

Long labels stay controlled
Production CTA

The button can handle longer labels, icons, tight cards, and mobile screens without creating ugly breaks.

↗Open complete responsive preview
Premium buttons are not just pretty. They are designed for real content length and real responsive constraints.

Fast practical rule

If button text wraps weirdly, do not shrink the font first. Inspect the button width, padding, white-space, icon layout, and parent group. The issue is usually space management, not typography.

Debug checklist

  • Check whether the button has a fixed width that is too small.
  • Remove white-space:nowrap if the label needs to wrap on small screens.
  • Use max-width:100% so the button cannot escape its parent.
  • Use min-width:0 on text inside icon buttons when needed.
  • Make icon buttons use display:inline-flex, align-items:center, and a controlled gap.
  • Let button groups wrap or stack on small screens.
  • Reduce excessive horizontal padding before reducing font size.
  • Consider shortening the button label if it is trying to do the job of a paragraph.
Best first move Inspect the button and check whether the text is wrapping because of width, no-wrap, or parent constraints.
Most common cause The button width is too narrow for the real label length.
Most mobile cause A button group stays in one row even when the card or viewport becomes narrow.
Better mindset Buttons need to be designed for real text, not only the short label in the mockup.

Related fixes that can help

If button text wraps weirdly, the surrounding problem may involve text overflow, form width, clickable layers, or responsive layout constraints.

Why is my text overflowing outside the box? If long words, labels, or inline text are escaping their container. Read this fix
Why is my button not clickable? If the button looks correct but another layer blocks click or hover behavior. Read this fix
Why is my form input wider than its container? If nearby form controls are also forcing the layout wider than the parent. Read this fix

Final takeaway

Button text wrapping weirdly is usually not a font-size problem. It is a space-management problem. The button is too narrow, the text is not allowed to wrap correctly, the icon row cannot shrink, or the button group is not responsive.

Start by checking the button’s width and white-space rule. Then inspect icons, padding, and parent button groups. Once the button is allowed to adapt to real content, the text becomes much easier to control.

Want more fixes like this?

Browse more CSS layout and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My Text Overflowing Outside the Box in CSS?

by

Text overflowing outside the box in CSS usually happens when long words, URLs, code strings, button labels, flex items, or grid columns cannot wrap or shrink safely inside their container.

CSS Overflow Fix

Why Is My Text Overflowing Outside the Box in CSS?

Text overflowing outside the box in CSS is one of those bugs that looks small until it breaks the whole layout. A single long URL, username, token, product title, button label, table value, or code string can push past a card, force horizontal scroll on mobile, stretch a grid column, or make a clean interface look broken. The fix is not simply “make the box wider.” The real fix is understanding how wrapping, minimum width, Flexbox, Grid, and overflow rules work together.

Browse All Fixes Explore CSS Fixes
  • Long URLs
  • Flexbox min-width
  • Grid overflow
  • Mobile horizontal scroll

What the bug looks like

Text sticks out of a box, the page becomes wider than the screen, a card refuses to shrink, or a button/table column pushes the layout sideways.

Why it happens

The browser cannot find a safe place to break the content, or the layout parent is not allowed to shrink the child to the available width.

What usually fixes it

Add safe wrapping, remove accidental nowrap, use min-width:0 in flex/grid children, and use local scrolling for tables or code blocks.

The core rule: text can only wrap where the browser is allowed to break it

Normal sentences wrap easily because they have spaces. A browser can move words to the next line without changing the text. But long unbroken strings are different. A URL, a package name, a long email address, an API token, or a generated product ID may not have a comfortable break point.

When the browser cannot break the string, the string becomes wider than the box. That one piece of content can then pressure the parent card, the flex row, the grid column, and sometimes the entire viewport. This is why text overflow often appears together with horizontal scroll on mobile, flex item shrinking problems, and CSS Grid breaking on mobile.

Error 1

The text has no safe wrapping rule

The most common version of this bug is a card or content block that looks fine with normal text, then breaks as soon as a long URL, code string, or unbroken word appears.

Broken code

No wrap protection 
.card {
  max-width: 320px;
  padding: 24px;
  border: 1px solid #ddd;
}

.card p {
  font-size: 16px;
}

Broken visual result

Text escapes
Comment card VeryLongUnbreakableTextThatPushesOutsideTheCardAndBreaksTheLayout
The content keeps going sideways →

The box has a width, but the long text has no safe wrapping instruction.

Correct code

Safe wrapping 
.card {
  max-width: 320px;
  padding: 24px;
  border: 1px solid #ddd;
}

.card p {
  overflow-wrap: anywhere;
}

Fixed visual result

Text stays inside
Comment card VeryLongUnbreakableTextThatCanNowBreakBeforeItDestroysTheLayout

The browser is now allowed to break the long string before it overflows the card.

Error 2

white-space:nowrap is blocking the wrap

white-space:nowrap is useful for short labels, menu items, and compact UI, but it becomes dangerous when the text can be long, translated, dynamic, or user-generated.

Broken code

Forced one line 
.button {
  max-width: 100%;
  padding: 12px 18px;
  white-space: nowrap;
}

Why this breaks

The button is told to stay on one line. If the label becomes longer than the available width, the button may stretch past its parent or overflow on mobile.

Correct code

Allow wrapping 
.button {
  max-width: 100%;
  padding: 12px 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}

When to use this

Use this for dynamic buttons, translated labels, long CTAs, admin panels, dashboards, and any component where text length is not fully controlled.

Error 3

The flex child needs min-width:0

This is the part many developers miss. You can add overflow-wrap:anywhere to the text, but the layout may still overflow if the flex child refuses to shrink. Flex items have an automatic minimum size that can protect their content too aggressively.

Broken code

Flex trap 
.row {
  display: flex;
  gap: 16px;
}

.content {
  flex: 1;
}

.content p {
  overflow-wrap: anywhere;
}

Broken visual result

Flex child resists
Message LongUnbrokenMessageTextCanStillPressureTheFlexRow

The text rule is there, but the flex child may still need permission to shrink.

Correct code

Shrink allowed 
.row {
  display: flex;
  gap: 16px;
}

.content {
  flex: 1;
  min-width: 0;
}

.content p {
  overflow-wrap: anywhere;
}

Fixed visual result

Flex child shrinks
Message LongUnbrokenMessageTextCanNowWrapInsideTheAvailableSpace

min-width:0 lets the flex item shrink, and wrapping keeps the text inside.

Error 4

Grid columns are using plain 1fr

CSS Grid can also overflow when content refuses to shrink. A common fix is replacing plain 1fr tracks with minmax(0,1fr), then making sure grid children are allowed to shrink.

Broken code

Content pressure 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card p {
  overflow-wrap: anywhere;
}

Broken visual result

Grid gets pressured
LongGridTextCanPressureTheColumn
Normal text

The grid track may still be influenced by long content.

Correct code

Safer tracks 
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.grid > * {
  min-width: 0;
}

.card p {
  overflow-wrap: anywhere;
}

Fixed visual result

Grid respects width
LongGridTextCanNowWrapInsideTheColumn
Normal text

minmax(0,1fr) helps the flexible track stay inside the available layout width.

Error 5

You are trying to force tables or code blocks to wrap when they should scroll locally

Not every overflow should be wrapped. Tables, code blocks, terminal output, and comparison grids often need their own horizontal scroll area. The mistake is letting them make the entire page scroll sideways.

Broken code

Page-level overflow 
.content table {
  width: 100%;
}

pre {
  white-space: pre;
}

Correct code

Local scroll 
.table-wrap,
.code-wrap {
  max-width: 100%;
  overflow-x: auto;
}

pre {
  overflow-x: auto;
}
Content type Best behavior Why
Normal paragraphs overflow-wrap:anywhere Text should remain readable inside the card or column.
Long URLs overflow-wrap:anywhere URLs can behave like one huge word and break mobile layouts.
Tables overflow-x:auto on wrapper Trying to squeeze columns can destroy readability.
Code blocks Local horizontal scroll Code indentation and line structure should often be preserved.
The goal is not to eliminate every horizontal scroll. The goal is to stop one element from making the entire page scroll sideways.

Fast practical rule

If text is overflowing outside the box, do not start by hiding it with overflow:hidden. First ask: can this content wrap? Is white-space:nowrap blocking wrapping? Is the parent a flex or grid item that needs min-width:0? Should this content wrap, or should it scroll inside its own local wrapper?

overflow-wrap:anywhere vs word-break:break-all

A lot of developers reach for word-break:break-all when text overflows. It works, but it can be too aggressive. It may break normal words in ugly places even when better wrapping options exist.

For most real interfaces, start with overflow-wrap:anywhere. It gives the browser permission to break long content when needed, without making every normal sentence look chopped up.

Better first choice

Cleaner breaks 
/* Usually the better first fix */
.text {
  overflow-wrap: anywhere;
}

/* More aggressive */
.text {
  word-break: break-all;
}

Reusable safe content utility

Production pattern 
.safe-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.card,
.comment,
.message,
.product-title,
.table-cell,
.sidebar,
.button {
  overflow-wrap: anywhere;
}

Where this pattern helps most

Use a safe wrapping pattern anywhere content can be unpredictable: user comments, support tickets, dashboards, admin tables, documentation pages, pricing cards, profile pages, product grids, chat messages, and mobile navigation.

It is especially helpful when your content comes from users, APIs, CMS fields, translations, or generated strings that you cannot fully control.

Debug checklist

  • Find the exact text causing the overflow: URL, email, long word, token, slug, file path, button label, or code string.
  • Add overflow-wrap:anywhere to the text or content wrapper.
  • Remove accidental white-space:nowrap when wrapping should be allowed.
  • If the text is inside Flexbox, add min-width:0 to the flexible child.
  • If the text is inside CSS Grid, use minmax(0,1fr) for flexible tracks.
  • Add min-width:0 to grid children when long content is inside them.
  • Use local overflow-x:auto wrappers for tables and code blocks instead of making the whole page scroll.
  • Do not hide real content with overflow:hidden unless clipping is actually the design goal.
  • Test on a narrow mobile viewport, not only a wide desktop browser.
Best first move Add overflow-wrap:anywhere to the text area that can receive long content.
Most common false fix Making the container wider instead of allowing the content to wrap.
Most overlooked cause The parent flex or grid item may need min-width:0.
Senior-level mindset Text overflow is not just a typography bug. It is often a content, wrapping, and layout-sizing bug at the same time.

Related fixes that can help

If text overflowing outside the box is part of a larger layout problem, these FrontFixer guides are the next places to check.

Horizontal Scroll on Mobile? Fix the Hidden CSS Bug If a long text string is making the whole mobile page scroll sideways. Read this fix
Why Is My Flex Item Shrinking Even With a Fixed Width? If Flexbox sizing is compressing or pressuring a layout in ways that feel confusing. Read this fix
Fix CSS Grid Breaking on Mobile If the overflowing text is inside a grid column or responsive card layout. Read this fix

Final takeaway

Text overflowing outside the box in CSS usually means the browser is missing one of three things: permission to break long content, permission for the parent layout item to shrink, or a local scroll wrapper for content that should not be forced into a tiny column.

Start with overflow-wrap:anywhere. Then remove accidental white-space:nowrap. If the text is inside Flexbox or Grid, add min-width:0 to the right child and use safer grid tracks like minmax(0,1fr). Once wrapping and layout sizing work together, the text stays inside the box instead of breaking the page.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.

Browse All Fixes Explore CSS Fixes