Make WordPress Core

Opened 4 years ago

Last modified 3 years ago

#48637 new defect (bug)

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

Reported by: johnstonphilip's profile johnstonphilip Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch 2nd-opinion
Focuses: ui, css Cc:

Description

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.

Attachments (1)

Screen Shot 2019-11-14 at 10.33.29 AM.png (44.0 KB) - added by johnstonphilip 4 years ago.
Vertically stacked words when css grid and min-width are used, caused by word-break: break-word;

Download all attachments as: .zip

Change History (11)

@johnstonphilip
4 years ago

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

#1 @SergeyBiryukov
4 years ago

  • Component changed from General to Bundled Theme
  • Summary changed from The use of word-break: break-word; causes vertical words with css grid min-width. to Twenty Twenty: The use of word-break: break-word; causes vertical words with css grid min-width.

#2 @ianbelanger
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3.1
  • Version set to 5.3

#3 @nielslange
4 years ago

  • Focuses css added

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

#4 @ianbelanger
3 years ago

  • Keywords reporter-feedback added

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

#6 @audrasjb
3 years ago

  • Milestone changed from 5.3.1 to 5.4

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.

#7 @johnstonphilip
3 years ago

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' );
  1. View a post.
  1. Observe the text is broken at every letter.

#8 @johnstonphilip
3 years ago

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

#9 @ianbelanger
3 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from 5.4 to 5.5

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

#10 @ianbelanger
3 years ago

  • Keywords 2nd-opinion added
  • Milestone changed from 5.5 to Future Release
Note: See TracTickets for help on using tickets.