Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#46703 closed defect (bug) (fixed)

Twenty Seventeen: Long non-breaking text strings can cause horizontal scrolling

Reported by: ianbelanger's profile ianbelanger Owned by: ianbelanger's profile ianbelanger
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: Cc:


While fixing #36346 I noticed that all Bundled Themes have some sort of word-wrap issues when using long non-breaking text strings. While this might be an edge case issue, I believe that it warrants fixing. Also, there doesn't seem to be any backwards compatibility issues.

In order to better track this issue in each theme, I am separating #36346 into separate tickets per theme.

Attachments (4)

46703.diff (749 bytes) - added by ianbelanger 5 years ago.
Fixes word-wrap issues
46703.1.diff (429 bytes) - added by ianbelanger 5 years ago.
Fixes word-wrap issues, with less CSS
46703-twenty-seventeen-site-title-before.PNG (348.6 KB) - added by ianbelanger 5 years ago.
.site-title before in chrome
46703-twenty-seventeen-site-title-after.PNG (420.9 KB) - added by ianbelanger 5 years ago.
.site-title after in chrome

Download all attachments as: .zip

Change History (15)

5 years ago

Fixes word-wrap issues

#1 @ianbelanger
5 years ago

  • Keywords has-patch needs-testing added

46703.diff adds

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
word-break: break-all;

to these selectors:


and max-width: 100%; to .site-title to prevent horizontal scrolling when long non-breaking text strings are used.

However, hyphens: auto; currently only works in Firefox. Unfortunately nothing worked for me in Chrome, IE11 or Edge.

This patch was tested on a Windows 10 machine, in Firefox, Chrome, IE11 and Edge browsers

Testing in other OS's and browsers would be appreciated.

Version 0, edited 5 years ago by ianbelanger (next)

5 years ago

Fixes word-wrap issues, with less CSS

#2 @ianbelanger
5 years ago

Turns out all it needed was max-width: 100%; added to body:not(.title-tagline-hidden) .site-branding-text to prevent horizontal scrolling when long non-breaking text strings are used.

5 years ago

.site-title before in chrome

5 years ago

.site-title after in chrome

#3 @ianbelanger
5 years ago

  • Keywords has-screenshots added

#4 @ianbelanger
5 years ago

  • Milestone changed from Awaiting Review to 5.2

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

5 years ago

#6 @JeffPaul
5 years ago

Per input in today's bugscrub, @dswebsme looking to test this on a Mac and update later today.

#7 @dswebsme
5 years ago

  • Keywords needs-testing removed

Patch "46703.1.diff" looks good on Mac. Do I need to test "46703.diff" as well or is .1 meant to replace it? Just clarifying as your second diff mentions fixing the same problem with less CSS (new here so not 100% up to speed on approach / nomenclature for multiple diffs).

Tested in Chrome, Safari and Firefox.

Tested Site Title, Site Description, Post Title, Page Title, Content and Comments with non-breaking strings.

Mac results reflect AFTER screenshots captured by @ianbelanger.

Last edited 5 years ago by dswebsme (previous) (diff)

#8 @ianbelanger
5 years ago

  • Keywords commit added

Thanks for testing @dswebsme. 46703.1.diff is an iteration on 46703.diff, so no need to test the first patch.

I'm marking this for commit

#9 @SergeyBiryukov
5 years ago

Just wanted to note that there are some previous discussions on long non-breaking text strings in bundled themes: #25008, #25232, #29971, all closed as wontfix due to being an edge case. Should we revisit those discussions before making a decision on commit here?

#10 @laurelfulford
5 years ago

I added a comment to #36346 re: the previous tickets closed as wontfix -- it seemed like it'd be easiest to centralize that discussion in one spot. Any feedback/thoughts would be appreciated there!

#11 @laurelfulford
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45257:

Twenty Seventeen: Prevent too-long strings from causing horizontal scrolling.

Add a max-width to the site title, so too-long strings will wrap instead of causing horizontal scrolling.

Props ianbelanger, dswebsme.
Fixes #46703.

Note: See TracTickets for help on using tickets.