[wp-trac] [WordPress Trac] #56341: Twenty Twenty-Two: Long text strings cause horizontal overflow (was: [Twenty Twenty-Two] Long text strings cause horizontal overflow)

[WordPress Trac]

#56341: Twenty Twenty-Two: Long text strings cause horizontal overflow
---------------------------+------------------------------
 Reporter:  mrfoxtalbot    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  6.0
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  css
---------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:   => css


Comment:

 Breaking text in every element by default, with the universal `*`
 selector, has caused an issue with trying to use CSS grid in Twenty Twenty
 (#48637).

 It might be worth putting the style on the site container, though (using
 `word-wrap`—see ticket:37617#comment:7):
 {{{
 .wp-site-blocks {
    word-wrap: break-word;
 }
 }}}

 (The example given on the other ticket would still need editing, but only
 on its container element.)

 ----

 Some blocks already wrap text for any theme:
 - The Navigation block item labels have `overflow-wrap: break-word`.
 - The Embed block container also has `overflow-wrap: break-word` (if your
 link had been inside the embed ''caption'', it would have wrapped).
 - Button block links use `word-break: break-word`.
 - The Post Title block also has `word-break: break-word`.

 ----

 > Older bundled themes would default to `word-break: break-all` to avoid
 this

 I only found two cases of `break-all` in the 12 bundled themes:
 [https://core.trac.wordpress.org/browser/tags/6.0/src/wp-
 content/themes/twentynineteen/style.css#L2619 table cells in Twenty
 Nineteen] and [https://core.trac.wordpress.org/browser/tags/6.0/src/wp-
 content/themes/twentytwenty/style.css#L1516 Twenty Twenty's mobile menu
 toggle button text]. However, `break-word` is far more common.

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