Twenty Sixteen/Fifteen/Thirteen/Twelve titles can lead to horizontal scrolls

[Clorith]

In the following bundled themes, a long non-breaking and non-hyphenated title can cause horizontal scrolling on smaller devices, and in the case of Twenty Fifteen also leads to container overflows in normal views as well.

This affects:

• Twenty Sizteen
• Twenty Fifteen
• Twenty Thirteen
• Twenty Twelve

The simple fix seems to be adding a word-wrap: break-word; to .site-title in these themes, as it has the best chance of breaking things up nicely when needed.

[Clorith]

Before applying the word-break to .site-title

[Clorith]

After applying the word-break to .site-title

[mustaasamaleem]

Thank you @Clorith for taking up my reported bug. Hope to see it resolved in the next release. :)

[nickgermaine]

Can I fix this? I mean, I'm capable of fixing it, but not familiar with the WP workflow. This would be my first bug fix (contribution) to WP.

[Clorith]

Replying to nickgermaine:

Can I fix this? I mean, I'm capable of fixing it, but not familiar with the WP workflow. This would be my first bug fix (contribution) to WP.

Certainly, it's open for anyone to fix.

You'll probably want to look over the handbook for contributing which is available at ​https://make.wordpress.org/core/handbook/, as it contains information on how to create a patch if you are unfamiliar with the approach, as well as many other handy tips and tricks for getting involved. The end of the handbook also includes various tutorials and guides.

[nickgermaine]

Awesome, thanks. I was reading some other things but didn't get a lot of info about the entire process. It mentioned subversion (I mostly use github), but I didn't really get any sort of guide or anything out of it. I'll check your link, thanks.

[nickgermaine]

I've got the patch made for this. Hope I did it correctly. I just ran svn diff > <patchname>.patch once I was done making the changes. I didn't have a twenty sixteen theme from the trunk. Is there something I have to do to get it?

So this patch covers Twenty Eleven -> Twenty Fifteen, and fixes the site title responsiveness.

(I'm also not sure if I need to change the status of this bug or anything? And I guess I just attach the patch at the top of this ticket?)

[nickgermaine]

Patch to word wrap the site title correctly.

[SergeyBiryukov]

Previously: #25008, #25232, #29971.

[karmatosed]

@iamtakashi what do you think from a design view?

[iamtakashi]

This is kind of an edge case but it might happen often with a language like German. But if we decided to fix this, I think we need to test this really extensively (both browsers and languages) so to avoid the case where "the cure is worse than the disease".

[mrahmadawais]

I think we can add .break-word class to the CSS and use it in all the places where there are titles. @iamtakashi let me know if you agree and I will contribute that.

[karmatosed]

@mrahmadawais my concern with break-word is it could look bad in a lot of cases. It also could cause the browser issues being suggested. I'd be interested in seeing a suggestion of it and thorough browser and device testing to prove this isn't the case.

[monikarao]

Just tested the patch on cross browsers and devices and it works nicely for me on ->

OS: Windows 10
Browser: Chrome 50.0.2661.102 , IE-11 , Firefox 46.0.1
WP : 4.5.3-alpha-37528
Server: Environment : VVV

But it doesn't work on->

OS: Windows 10
Browser: Safari 5.1.7
WP : 4.5.3-alpha-37528
Server: Environment : VVV

Screenshot:-> ​http://www.awesomescreenshot.com/image/1289591/690fe3dacaf0997632d3a387002b14d6

[danieltj]

What about adding text-overflow where on potential text overflow, ellipses are added and the words are cut off?

Not a fantastic solution but it means that long title are shortened when too long.

I think this word be better than 'break the word' as breaking the word half way through could cause confusion, no?

[monikarao]

Tested The Patch and the problem is also appearing for "Twenty Sixteen" and "Twenty Twelve" themes.Only works for "Twenty Fifteen" and "Twenty Thirteen" theme

[karmatosed]

@danieltj I'd be more keen to not add an extra visual element at this stage of the themes. They are released and that could create a bad user experience. It may not, but potentially.

We need a solution that doesn't break on Windows 10. Anyone want to investigate this?

[karmatosed]

As we don't have a fix, I am removing 4.6 from this until we get closer to a resolution.

[monikarao]

Yes, we need another solution for this because the problem is also appearing in cross browsers for different themes.

[akiya]

Patch to Add class ".site-title" for hyphens style. Only TwentySixteen style.css .

[akiya]

fixed site-title overflow for TwentySixteen

[akiya]

Post-title is not scroll or cut off too long word, so styled "hyphens".

style.css/TwentySixteen

1857 .post-navigation .post-title,
1858 .entry-title,
1859 .comments-title {
1860 >   -webkit-hyphens: auto;
1861 >   -moz-hyphens: auto;
1862 >   -ms-hyphens: auto;
1863 >   hyphens: auto;
1864 }                     

Similarly, hyphens style add .site-title .

[misfist]

Text Wrap Chrome

[misfist]

Text Wrap Firefox

[misfist]

I tested the patch (sitetitle-word-break.diff) in Firefox 50.0.2 and Chrome 54.0.2840.98 (OS X 10.10.5) on Twenty Sixteen.

The patch, which is for Twenty Sixteen only seems to work in Firefox, but it has no effect in Chrome.

[misfist]

Text Wrap Firefox - Working

[misfist]

About Page Chrome - Not Working

[akiya]

I'm tested too Chrome 56.0.2924.76 on Windows 10 (Ver 1607 Build No.14393.693).
This patch is not worked in Chrome.
So, this problem seems to fixed by other way.

[DrewAPicture]

Assigning ownership to mark the good-first-bug as "claimed".

[melchoyce]

The hyphen solution works great. Does someone want to create an updated patch?

[akiya]

hyphens_and_wordbreak_together

[akiya]

hyphens_and_wordbreak_together

[akiya]

Chrome does not support "hyphens:auto"
Available value for hyphens are manual/none/unset on chrome 66.0.3359.117.
It is better that declaration hyphens property and word-wrap property like twentyfifteen.

twentyfifteen/style.css row 1657

.entry-content,
.entry-summary,
.page-content,
.comment-content {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word;
}

This style is renderd below screenshot.

[akiya]

Should I divide TwentySeventeen patch?
I had included TwentySeventeen/style.css in patch.

[ianbelanger]

#43959 was marked as a duplicate.

[ianbelanger]

While looking into this issue, I noticed that all Bundled Themes have word-wrap issues when long non-breaking text is used. While this may be an "edge" case issue, I believe it warrants fixing. In order to better track this issue in each theme, I am closing this ticket in favor of separate tickets per theme.

[ianbelanger]

Related Tickets

• Twenty Ten: #46669
• Twenty Eleven: #46674
• Twenty Twelve: #46676
• Twenty Thirteen: #46695
• Twenty Fourteen: #46696
• Twenty Fifteen: #46697
• Twenty Sixteen: #46700
• Twenty Seventeen: #46703
• Twenty Nineteen: #46704

[SergeyBiryukov]

#37176 was marked as a duplicate.

[SergeyBiryukov]

Restoring the milestone, so the ticket does not disappear from various reports.

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.

I'd suggest revisiting those discussions before making a decision on commits in the related tickets in comment:34.

Additionally, I've just closed #37176 as a duplicate. @ianbelanger, could you take a look and see if the patches on the related tickets here include the changes from that ticket?

[SergeyBiryukov]

Also related: #21151, #21503.

[laurelfulford]

Thanks for highlighting those discussions, @SergeyBiryukov! I didn't realize this issue had such a history, and it's good to know the context around why it wasn't fixed in earlier themes.

After reading through the tickets, I would still be for fixing this issue in the newer default themes, for a couple reasons:

• Smaller screen traffic is much more common than it was when the tickets were wontfixed 4-5 years ago.
• Having longer words break mimics the behaviour you get in the new block editor -- both the site title and editor itself will break too-long text.
• We've already included word-breaking in some form in the two most recent default themes:
  • Twenty Seventeen: Page content, widget text and tag clouds
  • Twenty Nineteen: titles (the word-wrap is always there, though the hyphenation is only set for smaller screens) and paragraphs

I'm less sure it needs to be fixed in all of the default themes. I'm a bit leery of changing styles that may not work optimally in the older browsers that they should support. But I'm open to discussing that further!

Would appreciate your thoughts here, @ianbelanger & @davidakennedy, along with anyone else who has a opinion either way!

[davidakennedy]

I'm in agreement with @laurelfulford here. I'd want to focus on the newer default themes here, fixing those. That allows us to go ahead and respect the wontfix for older themes, and potentially avoid any thorny issues as a result of making a fix like this.

[ianbelanger]

Thanks for weighing in @laurelfulford and @davidakennedy!

I tend to agree with both of you about fixing the newer default themes, mainly TwentySeventeen and TwentyNineteen. I was thinking that we should do the same for the older themes, but after reading all of the comments from previous tickets, I see the reasoning for leaving them alone. I will close out the remaining theme tickets as wontfix. Also going to close this ticket as wontfix, as it only reported themes before TwentySeventeen. Feel free to reopen if you think that this requires further discussion.

[laurelfulford]

Thanks @ianbelanger and @davidakennedy!

I can take care of committing the updates to Twenty Seventeen & Nineteen today.