Prevent long reference URLs from overflowing mobile article content

[georgeolaru]

Problem

Long visible reference URLs inside post-content links can make a narrow page wider than its physical viewport. Readers must scroll sideways even though the paragraph and reading-track boxes have the correct width.

Observed in Anima LT 2.0.49 (source 09acef4d38734b313e48b771f5d4f2e571e7224e), with Nova Blocks and Style Manager active, in isolated Chrome mobile/touch contexts. Customer content and private screenshots are intentionally omitted.

Reproduction

1. Use an Anima LT single-post template that renders Core Post Content.
2. In a normal paragraph, add a reference link whose visible text is the URL and whose final path segment is long and unbroken. Suggested content-only fixture:

<!-- wp:paragraph -->
<p>Reference: <a href="https://example.org/references/abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">https://example.org/references/abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</a></p>
<!-- /wp:paragraph -->

3. Load the frontend in a fresh 320px mobile/touch viewport; also test 390px. Do not resize from desktop first.
4. Compare the requested physical width with both window.innerWidth and document.documentElement.scrollWidth. Inspect the link's inline fragments as well as the paragraph box. An expanded mobile layout viewport must not be mistaken for a pass.

The fixture above is suggested reproduction content, not a newly persisted test post. Actual observed article measurements:

Anonymous sample	Requested width	Document scroll width	Paragraph width
A	390px	421px	348.5px
A	320px	415px	280px
B	320px	352px	280px
C	320px	381px	280px

The same three samples at both mobile widths give six targeted cases; four fail before the candidate rule. All samples have correct-width paragraph boxes. Their normal desktop reading layouts do not have the same overflow.

Diagnosis and tested candidate

The overflow is in long unbreakable inline link text, not an oversized paragraph, grid or font setting. Native Core typography/layout controls do not expose a wrapping attribute for this problem.

A disposable-DOM rule makes all six targeted mobile cases fit their requested physical width while preserving paragraph measure, font size, exact text and hrefs:

.entry-content a {
  overflow-wrap: anywhere;
}

Proposed source owner: src/scss/elements/_links.scss. Keep the scope to article-content links; do not use a global word-break: break-all, hide overflow, rewrite URLs, shrink typography, or hand-edit compiled stylesheets. Confirm the appropriate editor content scope before choosing the final selector.

This is a measured candidate, not an implemented or released fix. No theme source, generated build or persistent site content was changed during the proof.

Acceptance criteria

• Long visible reference URLs fit 320px and 390px physical viewports in fresh mobile/touch contexts; verify requested width, inner width and document width.
• Normal desktop article measure and ordinary words are unchanged; no new within-word splitting in surrounding prose.
• Exact stored article text, link text and hrefs remain unchanged; linked references still work.
• Frontend and relevant editor content scopes have equivalent readable behavior, without affecting navigation, cards, buttons or unrelated headings.
• Add an automated regression fixture demonstrating failure without the rule and success with it; retain the pre-fix measurements.
• Change source SCSS and verify generated commercial/LT output through the normal build workflow; do not patch compiled CSS directly.

Issue filing does not establish source implementation, package verification or release readiness.

[georgeolaru]

Visual reference — generic fixture at 320px

Browser-captured comparison using the example.org reference fixture from this issue and current Anima LT 2.0.49/Nova article-grid and generated typography styles. No original customer content or identity is shown.

Before: current wrapping	Candidate: disposable fixture only

The dashed outline is the paragraph box. Requested/inner width is 320px in both captures; document scroll width changes 1591→320px. Paragraph width stays 280px, body text 17.25px, and reference text/href and surrounding prose are exact.

Only the candidate adds:

.entry-content a { overflow-wrap: anywhere; }

This is a narrow desktop-Chrome CSS-viewport illustration, not a new mobile/touch retest of the original articles. The generic 185-character URL produces more overflow than the anonymous original samples above; these are separate measurements. Both fixtures share caption/boundary markup and an opacity-only paint state because the original site's reveal scripts are not copied. No overflow-hiding change or typography reduction is introduced.

Not implemented or shipped: no theme source, build or persisted website content was changed. Frontend/editor scope, touch/desktop regression and package validation remain pending.

[georgeolaru]

Fixed in 5d29070 (milestone 2.0.50).

What I found beyond the candidate

The proposed .entry-content a { overflow-wrap: anywhere; } fixes the links, but not the page, on the standard Anima LT single-post template:

• The template shows the post excerpt as the lead. An auto excerpt repeats the article's opening words, reference URL included, as plain text. After the links wrapped, that excerpt alone still held the page at scrollWidth 1675 at 320px, with the mobile layout viewport zoomed out to 1280.
• Collection card descriptions (e.g. related posts) repeat it too; there it was clipped by the card rather than widening the page.
• .entry-content a would also reach buttons, card links and any navigation inside content. overflow-wrap: anywhere lowers min-content width, so in flex and grid rows (Buttons) it can let items shrink and split words.

Fix (src/scss/elements/_links.scss)

.wp-block-post-content :is(p, li, dd, dt, th, td, figcaption, blockquote, cite, address) a:not(.wp-block-navigation-item__content, .wp-block-button__link) {
    overflow-wrap: anywhere;
}

:is(.wp-block-post-excerpt__excerpt, .nb-card__description) {
    overflow-wrap: break-word;
}

• Links: break anywhere, but only in text containers of Post Content. .wp-block-post-content is also the post editor's content root in WP 7.1, and the bundle imports it under .editor-styles-wrapper, so the frontend and the editor get the same rule.
• Plain-text URLs (excerpt lead, card descriptions): break-word breaks only a word that can't fit, and leaves min-content sizing (card and grid tracks) untouched.
• No break-all, no clipping, no URL rewriting or smaller type; the stored text is unchanged.

Visual proof

Fresh Anima LT + Nova Blocks smoke site, a post built from this issue's fixture (paragraph, list item and table cell with the example.org URL, an ordinary-prose paragraph with long words, and a Buttons block). Fresh mobile/touch contexts, never resized from desktop.

Measurements

Check	Before	After
320px: requested / innerWidth / scrollWidth	320 / 1280 / 1675	320 / 320 / 320
390px: requested / innerWidth / scrollWidth	390 / 1560 / 1694	390 / 390 / 390
Link right edge vs container, 320px (p / li)	1464 / 1464 vs 300	299 / 299 vs 300
Table-cell link	already wrapped (core fixed-layout table)	unchanged
Link text and href	exact	exact
Ordinary prose mid-word splits	none	none
Button (Buttons block)	141×44, overflow-wrap: normal	same
Paragraph measure (320 / 390 / 1280 px)	280 / 349 / 802	same
Desktop 1280 horizontal scroll	none	none
Post editor canvas	—	link overflow-wrap: anywhere, fits its paragraph, no canvas overflow

Tests

New test/long-url-wrap.test.js:

• Style contract, compiled for the frontend and the editor bundle: scoped selector, every text container covered, navigation and buttons excluded. The plain-text rule is present and uses break-word. No other link rule uses break-all or unscoped anywhere.
• Headless-Chrome regression fixture at 320px, using the compiled rules:
  • without them, the link overruns its 300px edge, the excerpt overflows (1533px in a 280px box) and the page is wider than its viewport
  • with them, everything fits
  • text, hrefs, prose and button width are identical in both runs
  • it skips where Chrome isn't installed
• The fixture test failed before the rules existed.
• Full Anima node suite: 242/242; styles and build:wporg:install built under Node 22.