[wp-trac] [WordPress Trac] #64300: Twenty Twenty-Four and Twenty Twenty-Five: Long links overflow content area

[WordPress Trac]

#64300: Twenty Twenty-Four and Twenty Twenty-Five: Long links overflow content area
---------------------------+---------------------
 Reporter:  cagrimmett     |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  7.0
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  css
---------------------------+---------------------
Changes (by sabernhardt):

 * version:  trunk =>
 * component:  Themes => Bundled Theme


Old description:

> In the Twenty Twenty-Four and Twenty Twenty-Five themes, long links
> overflow their content area containers, and if long enough, results in a
> horizontal scroll bar.
>
> In my testing, this can be fixed by adding an `overflow-wrap: break-
> word;` and `word-wrap: break-word;` (for older browsers) to links.
>
> For TT5, this would here:
> https://core.trac.wordpress.org/browser/trunk/src/wp-
> content/themes/twentytwentyfive/theme.json#L685
>
> {{{
> "css": "& { overflow-wrap: break-word; word-wrap: break-word; }"
> }}}
>
> For TT4, it would go here:
> https://core.trac.wordpress.org/browser/trunk/src/wp-
> content/themes/twentytwentyfour/theme.json#L894
>
> See attached screenshots for how long links look in content now and how
> they look with the suggested fix applied.
>
> Now:
> [[Image(https://cagrimmett.com/wp-
> content/uploads/2025/11/CleanShot-2025-11-24-at-16.17.32 at 2x-scaled.png)]]
>
> With suggested fix:
> [[Image(https://cagrimmett.com/wp-
> content/uploads/2025/11/CleanShot-2025-11-24-at-14.12.17 at 2x-scaled.png)]]

New description:

 In the Twenty Twenty-Four and Twenty Twenty-Five themes, long links
 overflow their content area containers, and if long enough, results in a
 horizontal scroll bar.

 In my testing, this can be fixed by adding an `overflow-wrap: break-word;`
 and `word-wrap: break-word;` (for older browsers) to links.

 For TT5, this would go on
 [https://core.trac.wordpress.org/browser/tags/6.8.3/src/wp-
 content/themes/twentytwentyfive/theme.json#L685 line 685 of theme.json]

 {{{
 "css": "& { overflow-wrap: break-word; word-wrap: break-word; }"
 }}}

 For TT4, it would go on
 [https://core.trac.wordpress.org/browser/tags/6.8.3/src/wp-
 content/themes/twentytwentyfour/theme.json#L894 line 894 of theme.json]

 See attached screenshots for how long links look in content now and how
 they look with the suggested fix applied.

 Now:
 [[Image(https://cagrimmett.com/wp-
 content/uploads/2025/11/CleanShot-2025-11-24-at-16.17.32 at 2x-scaled.png,
 alt="a long URL with an access token extends beyond the content container
 and causes a horizontal scrollbar", title="")]]

 With suggested fix:
 [[Image(https://cagrimmett.com/wp-
 content/uploads/2025/11/CleanShot-2025-11-24-at-14.12.17 at 2x-scaled.png,
 alt="the long URL wraps within the content container", title="")]]

--

Comment:

 > links are most likely to be the problem (most likely to be long,
 unbroken strings in content)

 #56341 also gives long, linked URLs as an example, but link text should be
 kept concise and should avoid including full URLs. Seeing the text break
 the entire page might help encourage authors to write better link text.
 - [https://www.wcag.com/blog/writing-meaningful-link-
 text/#Best_Practices_for_Accessible_Link_Writing Master the Art of
 Accessible Link Text]
 - [https://dap.berkeley.edu/web-a11y-basics/links Web Accessibility
 Basics: Links]

 The example articles listed in the image have titles that would fit well
 for link text, and URL parts such as access tokens and UTM parameters
 ideally would never be visible on screen or spoken.

 ----

 If we change the four individual themes' CSS, T22 and T25 have their own
 CSS files, and #63875 already adjusted those for `pre` element overflow.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64300#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform