Twenty Twenty: The use of word-break: break-word; causes vertical words with css grid min-width.

[johnstonphilip]

If a plugin uses css grid and sets a grid column to be min-width, any buttons or words in that column become vertically stacked, as the word is broken up at every letter. See attached image.

[johnstonphilip]

Vertically stacked words when css grid and min-width are used, caused by word-break: break-word;

[nielslange]

@johnstonphilip Can you provide detailed steps how to reproduce this issue?

[audrasjb]

Hello,

This ticket needs some further informations from the reporter so we could be able to reproduce the issue.
As 5.3.1 is planned in few day, let's move the ticket to 5.4.

[johnstonphilip]

To reproduce do this:

1. Put this code in a child theme or custom plugin:

function output_some_css_grid() {
	echo '<div style="display:grid; grid-auto-columns: min-content;"><button>Click me</button></div>';
}
add_action( 'the_content', 'output_some_css_grid' );

2. View a post.

3. Observe the text is broken at every letter.

[johnstonphilip]

Just to clarify, if you switch to another WP default theme (like twentynineteen) this isn't an issue.

[ianbelanger]

Punting to 5.5 as there is still no patch for this yet.

[poena]

I can reproduce the problem.
To solve this, we need to find where the word-break is needed, assuming there was a reason that it was added, and then we can make it more restrictive.

[sabernhardt]

​Issue 85 explains adding word-wrap for post titles, but word-break was already in the theme's initial commit (and in ​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' );

[poena]

@sabernhardt Your input is valid, shall we close this ticket as wontfix?
Child themes and plugins can add their own workarounds, which would be specific to their exact needs.

[sabernhardt]

With multiple unknowns, I think closing as 'wontfix' (not planned) would be best at this time.

If someone determines a safe way to change the styles and creates a patch, the ticket could be reopened.