Text cut off on mobile: causes and fixes

01

Fixed heights on text boxes

A card, button or banner with height: 60px fits one line on desktop. On a phone the label wraps to two lines and the second line is clipped or spills over the next element.

Use min-height instead of height, and padding for breathing room, so the box grows with its text.

.card-title { min-height: 60px; } /* not height: 60px */

02

overflow: hidden and text-overflow: ellipsis

white-space: nowrap with overflow: hidden is meant for single-line labels. On a heading or a button it cuts off the important part of the text on small screens. Allow wrapping on mobile, or use line-clamp only where a summary is acceptable.

.button { white-space: normal; }
@media (min-width: 768px) { .button { white-space: nowrap; } }

03

Text wider than the screen

A long word, URL or email in a narrow column can’t wrap, so it runs past the edge. If a wrapper hides overflow, it is silently cut. Add overflow-wrap: anywhere, and make sure grid and flex children can shrink with min-width: 0.

04

Line height and big headings

A line-height smaller than 1 on large headings clips the tops of capital letters and the bottoms of letters like g and y, especially in fonts with tall ascenders. Keep line-height at 1.05 or more for headings, and scale heading sizes down on phones with clamp().

h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.08; }