Text overlapping or cut off on mobile: causes and fixes

Updated October 17, 2026 · Covers: Text overlaps other text Text is cut off

A layout can look perfect on a 1440px monitor and fall apart on a 375px phone: a headline runs into the paragraph below it, a button label stops halfway through a word, a card title ends in "…" before the important part. These are two related problems, overlapping text and clipped text, and they almost always come from the same root cause: a box that was given a fixed size while the text inside it was allowed to grow.

What it means

Overlapping text means two pieces of text are drawn on top of each other, so neither can be read. Typical examples: a hero heading sitting on top of the subtitle, a price badge covering a product name, or a long navigation item running into its neighbour.

Clipped text means text doesn't fit in its box and the overflow is hidden. Sometimes the cut is hard (half a line disappears under the next section), sometimes it's softer, with an ellipsis that hides the end of a label. Either way, the visitor can't see the whole thing, and on a button that might be the one word that explains what the button does.

Why it matters

Unreadable text is the most direct mobile failure there is: the information is on the page, but the visitor can't get it. A clipped "Add to ca…" button or a menu item that reads "Pricing & Pl" makes a site feel broken, and people rarely zoom in to work out what you meant. It also hurts accessibility. WCAG 1.4.4 Resize Text expects content to survive text enlarged to 200% without loss of content, and many people browse with a larger system font size every day. A layout that only works at the exact font size the designer used is fragile by definition.

Common causes

Absolute positioning

Placing text with position: absolute and fixed top values works only while the text above it keeps the same height. On a narrow screen the heading wraps onto three lines instead of one, but the absolutely positioned subtitle stays where it was told, right on top of it.

Fixed heights

A card, banner or button with height: 48px or height: 320px doesn't grow when its content wraps. With overflow: hidden the extra lines are cut off; without it they spill out and overlap whatever comes next.

No wrapping: nowrap and ellipsis

white-space: nowrap keeps text on one line no matter how narrow the screen is. Combined with overflow: hidden and text-overflow: ellipsis, it silently hides the end of the label. An ellipsis is a reasonable choice for long, repetitive lists such as file names or email subjects, but not for headings, prices, button labels or navigation.

Fixed-width buttons and tabs

A button set to width: 120px fits "Buy now" in English, but not "Jetzt kaufen" in German or a longer product name. Tab bars with equal fixed widths have the same problem.

Translations and long words

Translated text is often noticeably longer than English, and some languages build long compound words that can't break at spaces. Long URLs, email addresses and product codes behave the same way.

Large text settings

Everything above gets worse when the visitor has increased their font size. Text grows; fixed boxes don't. A heading that just fits at default size will overflow at 150%.

How MobileCheck finds it

MobileCheck loads your page in a real browser engine for each device you pick, WebKit for iPhones and iPads and Chromium for Android, at the device's real viewport size. It then inspects the rendered text:

• Text overlap: we compare the boxes of individual text lines and flag places where text from different elements substantially overlaps other text.
• Text cut off: we flag elements whose text is wider or taller than the visible box while overflow is hidden or clipped, including text hidden behind an ellipsis. Deliberate multi-line truncation with line-clamp isn't counted as vertical clipping.

Both checks run in the normal view and again in the large text scenario (150%), with the mobile menu opened, and (for overlap) in dark mode. Each problem is highlighted on the screenshot, so you can see exactly which heading or button is affected.

How to fix it

Let content define the height

Replace fixed heights with min-height and padding, so the box can grow when text wraps:

.card {
  min-height: 320px;   /* instead of height: 320px */
  padding: 1.25rem;
}
.button {
  min-height: 44px;    /* instead of height: 44px */
  padding: 0.5rem 1rem;
}

Use normal flow instead of absolute positioning

Stack text with flexbox or grid. Elements then push each other down instead of colliding:

.hero {
  display: grid;
  gap: 0.75rem;
  align-content: end;
  min-height: 60vh;
}

If you need text over an image, put both in the same grid cell (grid-area: 1 / 1) rather than positioning the text absolutely with fixed offsets.

Allow wrapping

.button, .nav a, .tab {
  white-space: normal;
  overflow-wrap: anywhere;   /* breaks long words and URLs if needed */
  width: auto;
  min-width: 0;
}

overflow-wrap: anywhere is a safety net for long words; for regular prose, overflow-wrap: break-word is gentler. In flex layouts, min-width: 0 on the child lets it shrink below its content width and wrap.

Truncate on purpose, not by accident

If a long text really must be shortened, for example a product description in a card, use line clamping and make the full text available elsewhere (the product page, or a "more" link):

.card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

Never truncate headings, prices, buttons or navigation. If a label doesn't fit, shorten the label in the copy, or let it wrap onto two lines.

How to check the fix

Re-run the free mobile check on the same page with a small phone such as the iPhone SE and a larger Android phone, and look at the normal and large text screenshots side by side. To test by hand, open the page in the phone window, rotate the device, open the menu and scroll through the parts that broke before. If your site is multilingual, check the language with the longest words, not just English. For related layout problems, see content wider than the screen.

Related guides