How to Fix Text Overflowing Its Container on Mobile with CSS

Your page looks perfect on your laptop. The headings sit neatly in their boxes, buttons line up, and nothing feels crowded. Then you open the same page on your phone and the layout falls apart. Long words spill past the edge of the screen, a web address pushes a card wider than the display, and you have to scroll sideways just to read a single paragraph.

Text overflow on mobile is one of the most frustrating responsive design problems because the code often looks correct at first glance. The fix is rarely one single setting. It is usually a combination of flexible widths, sensible word breaking, and containers that are allowed to shrink. This guide walks through each cause and the exact CSS that solves it.

Quick Answer

Fix text overflowing on mobile by making containers flexible with max-width: 100%, allowing long words to break with overflow-wrap: break-word and word-break: break-word, and letting flex and grid children shrink with min-width: 0. Also check for fixed pixel widths and large fixed font sizes, and replace them with percentages, relative units, and media queries for small screens.

Why Text Overflows on Small Screens

A phone screen may only be 360 pixels wide in CSS terms, sometimes less. Any content that cannot wrap or shrink to fit that narrow space has nowhere to go, so the browser lets it stick out beyond its box.

Normal sentences wrap easily because spaces give the browser natural break points. The problems come from content without convenient spaces: very long words, URLs, email addresses, product codes, file names, and headings written as one long phrase. Fixed widths make things worse. If a card is set to width: 500px, it cannot fit a 360 pixel screen no matter how well the text inside it wraps.

Flexbox and grid layouts add one more hidden cause. By default, flex and grid items refuse to shrink below the size of their content. A single unbreakable word inside a flex item can therefore force the whole item, and the whole row, wider than the screen, even when you have set sensible widths elsewhere.

How to Find the Element Causing the Overflow

Before writing CSS, identify exactly which element is too wide. Guessing leads to fixes that hide the symptom while the page still scrolls sideways.

1. Open the page on your phone or use your desktop browser’s device toolbar to simulate a small screen such as 360 by 640.
2. Scroll sideways. The element that extends past the right edge is your problem area.
3. Inspect the page and select elements near that area until you find one whose width is larger than the viewport.
4. Check its styles for fixed widths, long unbroken text, or flex and grid sizing rules.
5. Temporarily add outline: 1px solid red to suspect elements to see their true boxes on screen.

Fix 1: Let Long Words and Links Wrap

The most direct fix for unbreakable text is to tell the browser it may break words when there is no other choice. Add these properties to the container that holds the text, or globally to paragraphs and headings:

overflow-wrap: break-word; word-break: break-word;

The overflow-wrap property lets the browser split a long word onto the next line only when the word would otherwise overflow. Normal words keep their natural wrapping, so your text still looks clean. Use it on article text, comments, table cells, and anywhere users might paste a long link or code string.

For links specifically, you can be more aggressive because a broken URL is still readable and clickable:

a { overflow-wrap: anywhere; }

The value anywhere allows a break at any character when needed and also lets the text take part in minimum size calculations, which helps inside flex and grid layouts. The reference for the overflow-wrap property and its values on MDN shows how each option behaves with real examples.

For code blocks, wrapping hides the true shape of the code. Instead, allow horizontal scrolling inside the block only:

pre { overflow-x: auto; max-width: 100%; }

This keeps the page itself stable while long lines of code scroll inside their own box, which is the pattern readers expect.

Fix 2: Remove Fixed Widths That Cannot Fit

Search your stylesheet for large fixed widths on containers, cards, images, tables, and embedded content. Any width value in pixels that is larger than a small phone screen is a risk. Replace rigid widths with flexible ones:

• Change width: 600px to width: 100% combined with max-width: 600px, so the element grows up to your design size but shrinks on smaller screens.
• Add max-width: 100% and height: auto to images and videos so media never forces its container wider.
• Use percentages or fr units for layout columns instead of pixel tracks that add up to more than the viewport.
• Check embedded maps, videos, and adverts, which often arrive with fixed pixel dimensions in their embed code, and wrap them in a container with max-width: 100% and overflow: hidden.

Tables deserve special attention. Wrap a wide table in a container with overflow-x: auto so it scrolls inside its wrapper, or restyle it into stacked rows on small screens with a media query.

Fix 3: Let Flex and Grid Children Shrink

If your text sits inside a flex row or a grid column, the container may be fine but the child refuses to get smaller. This is the most commonly missed cause of mobile overflow, and it has a simple fix.

For flex items, add min-width: 0 to the item that contains the long text. For grid items, add min-width: 0 and consider minmax(0, 1fr) in your column definition instead of a plain 1fr. These settings override the default behaviour where items size themselves to their largest unbreakable piece of content.

For example, without min-width: 0 on a flex text area, one long link can force the whole card beyond the screen. With it, the area shrinks and the overflow-wrap rule can do its job: one fix allows shrinking, the other allows wrapping. Our companion guide on making a website fully responsive with CSS media queries shows how these pieces fit together.

Fix 4: Scale Down Fonts and Spacing on Small Screens

Sometimes the text itself is simply too large for the space. A heading set at 48px with wide letter spacing may fit a desktop hero section but overflow a phone, especially if it contains a long word. Use media queries or fluid sizing to reduce it gracefully:

1. Set your base heading sizes in relative units such as rem so they scale with the root font size.
2. Add a media query below about 600px that reduces heading sizes, padding, and margins.
3. Consider the clamp() function for fluid type, for example font-size: clamp(1.5rem, 5vw, 2.75rem), which shrinks smoothly as the screen narrows without sudden jumps.
4. Reduce large horizontal padding on containers at mobile sizes, since 40px of padding on both sides steals 80 pixels from an already narrow screen.

Also check the viewport meta tag in your HTML head. Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers pretend the page is about 980 pixels wide and shrink everything, which creates a different but equally broken experience. The guidance on responsive design foundations including the viewport on web.dev explains why this tag matters so much.

Common Mistakes and Helpful Tips

The biggest mistake is using overflow: hidden on the body or html element as a quick cure. It stops the sideways scrolling, but it also cuts off your text mid-word and hides content completely. Readers cannot see what was clipped, and you lose the signal that something still needs a proper fix. Use it only as a temporary diagnostic, never as the final solution.

Another common mistake is applying word-break: break-all to all text. This breaks ordinary words in awkward places and makes paragraphs hard to read. Reserve aggressive breaking for links, codes, and user-generated strings, and let normal prose use overflow-wrap: break-word so it only breaks when truly necessary.

Test with real content, not placeholder sentences, because short sample text hides problems that appear with a real headline, long word, or tracking URL. Check the longest realistic strings at 320, 360, and 412 pixel widths, and test on at least one real phone.

Conclusion

Mobile text overflow comes from unbreakable words, fixed widths, flex and grid items that will not shrink, and fonts sized only for desktop. Fix it at the source: allow long words to wrap, make containers flexible with max-width, add min-width: 0 where shrinking is blocked, and scale type and padding down on small screens. Work through those four layers and your text will stay inside its box on every device.

Frequently Asked Questions

Why does my page scroll sideways on mobile only?

Sideways scrolling means at least one element is wider than the viewport. On desktop the same element fits, so you never notice. Inspect the page at a mobile width, find the element crossing the right edge, and apply the wrapping, width, or shrinking fix that matches its cause.

What is the difference between overflow-wrap and word-break?

overflow-wrap: break-word breaks a long word only when it would overflow its container. word-break: break-word behaves similarly in modern browsers, while word-break: break-all breaks any word anywhere, which usually looks bad for normal sentences.

How do I stop a long URL from breaking my layout?

Give links overflow-wrap: anywhere inside text containers. The URL will wrap across lines instead of stretching the box, and it remains fully clickable. Shortening display text for the link is another clean option.

Why does min-width: 0 fix flexbox overflow?

Flex items have an automatic minimum size equal to their content. A long unbreakable word sets that minimum very wide. Setting min-width: 0 removes that floor so the item can shrink to fit the screen, after which normal wrapping can work.

Should I hide overflowing text with overflow: hidden?

Only for decorative elements where clipped content does not matter. For real text, hidden overflow means lost information for your readers. Fix the width or wrapping instead so all content stays visible and readable.