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

[ianbelanger]

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.

[ianbelanger]

Fixes word-wrap issues

[ianbelanger]

46703.diff adds

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

to these selectors:

.site-title

and max-width: 100%; to body:not(.title-tagline-hidden) .site-branding-text 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.

[ianbelanger]

Fixes word-wrap issues, with less CSS

[ianbelanger]

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.

[ianbelanger]

.site-title before in chrome

[ianbelanger]

.site-title after in chrome

[JeffPaul]

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

[dswebsme]

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.

[ianbelanger]

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

[SergeyBiryukov]

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?

[laurelfulford]

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!

[laurelfulford]

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.