[wp-trac] [WordPress Trac] #48637: Twenty Twenty: The use of word-break: break-word; causes vertical words with css grid min-width.

[WordPress Trac]

#48637: Twenty Twenty: The use of word-break: break-word; causes vertical words
with css grid min-width.
----------------------------+-----------------------------
 Reporter:  johnstonphilip  |       Owner:  (none)
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  Future Release
Component:  Bundled Theme   |     Version:  5.3
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  ui, css
----------------------------+-----------------------------

Comment (by sabernhardt):

 [https://github.com/WordPress/twentytwenty/issues/85 Issue 85] explains
 adding `word-wrap` for post titles, but `word-break` was already in the
 theme's initial commit (and in
 [https://github.com/andersnoren/chaplin/blame/master/style.css#L107
 Chaplin's initial commit]).

 I am unsure about changing those styles now because people may depend on
 them for any other elements, plus the `before` and `after` pseudo-
 elements. Making it more restrictive could easily involve raising
 specificity and overriding styles written to define those properties. On
 the other hand, I should not be surprised if the current word wrap causes
 problems in situations besides using `min-content` in grid layout.

 The grid layout has a possible workaround for Twenty Twenty and other
 themes that follow the same pattern:
 {{{
 function css_grid_override_word_wrap() {
         echo '<style>
 .grid-min-content {
         display: grid;
         grid-auto-columns: min-content;
 }
 .grid-min-content * {
         word-wrap: normal;
         word-break: normal;
 }
 </style>
 <div class="grid-min-content">
         <button>Click me</button>
 </div>';
 }
 add_action( 'the_content', 'css_grid_override_word_wrap' );
 }}}

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