Keep long links and formulas readable on mobile
Use a narrow-screen fixture with long URLs, email addresses, formulas and tables to diagnose document overflow without destroying readability.
Which values should the mobile fixture contain?
Use content that is longer and less convenient than your design mockup. A short link label can hide an overflowing raw URL elsewhere in the page. A tiny sample formula will not expose an unbroken expression. The fixture should represent the longest plausible values your component is meant to display.
W3C’s reflow guidance addresses a 320 CSS-pixel equivalent width for vertical content and explains the limited exception for two-dimensional tables. The practical target is readable surrounding content with contained necessary scrolling, not a blanket ban on every wide element. [W3C WAI: Understanding reflow]
URL: https://example.com/resources/reporting?utm_source=partner_newsletter&utm_medium=email&utm_campaign=operations_reporting_workshop
Email: reporting-team+workshop@example.com
Formula: required_orders = fixed_offer_cost / contribution_per_incremental_order
Table cells: USD 12,480.75 | Not available | Excludes variable fulfillment costsFind the element that widens the document
- Open the exact fixture at the narrow viewport and wait for real content and fonts.
- Compare viewport width with the document’s scroll width.
- Inspect elements whose bounding rectangles extend beyond the viewport.
- Identify whether the cause is a link, grid child, code block, table or fixed-width asset.
- Apply the smallest appropriate containment or wrapping change and rerun the same fixture.
Do not fix every overflow with a global rule that breaks all words or hides horizontal content. That can turn currency values into vertical fragments or conceal the final table columns. The element’s purpose determines the fix. A URL can break at more places than a financial amount intended for comparison.
Use different treatment for different content
| Content | Useful behavior | What would fail |
|---|---|---|
| Long URL | Wrap within its container while preserving the destination | Invisible clipping or page-wide horizontal movement |
| Email address | Wrap if necessary; keep copy and link behavior usable | Text runs behind another component |
| Formula | Readable wrapped explanation or local code scrolling | Every symbol splits into an unreadable stack |
| Comparison table | Local horizontal scroll with coherent cells | Document scroll or amounts broken into fragments |
| Grid child | Allow the child to shrink within its parent | Implicit minimum width defeats the responsive grid |
Tables also need semantic headers and useful captions. WAI’s table tutorial explains those relationships; local scrolling does not replace them. When a table becomes difficult to compare, consider removing a low-value dimension or adding a concise decision summary rather than squeezing the same density into less space. [W3C WAI: Tables tutorial]
Can someone read and use the result?
After the width check passes, read the longest labels and values at the target size. Reach the final table column with touch and keyboard where applicable. Copy the URL and verify that the destination is intact. A DOM measurement can detect overflow, but it cannot tell you whether “12,480.75” has become a confusing pile of characters.
Check intermediate widths too. A component may look correct at the phone and desktop presets while failing near a breakpoint. Include enlarged text or zoom in the acceptance record, and verify that headings, captions and controls remain reachable around the scrollable area.
I would keep this fixture with the component’s regression checks. New campaign names, translations and downloadable-file labels tend to be longer than the first mockup. A reusable awkward-content test catches that class of defect without imposing an arbitrary limit on what readers are allowed to see.
Sources
AI-assisted writing and an AI-generated editorial cover. Source links and checked dates are listed below; illustrative examples are labeled in the text.
- W3C WAI: Understanding reflow — checked 2026-10-18
- W3C WAI: Tables tutorial — checked 2026-10-18