Username text overflows in error message box on login screen.

[soniakash]

If we enter correct long username in wp-admin login page and wrong password then it show error message and it goes out of the message box.

[Presskopp]

related https://core.trac.wordpress.org/ticket/37555#comment:3

[desrosj]

I am able to reproduce this in the current version of WordPress. login_error.patch​ does not fix the issue for me, though.

[audrasjb]

Before patch

[audrasjb]

Login and Registration: Ensure that long username or email doesn’t break the login message interface.

[audrasjb]

After patch

[audrasjb]

After patch (2)

[audrasjb]

Looks like word-break: break-all; is not ideal since it breaks other words.
Let's refresh the patch using break-word :)

[audrasjb]

Login and Registration: Ensure that long username or email doesn’t break the login message interface.

[audrasjb]

It's slightly better with break-word (37617.2.diff)

[audrasjb]

Looks like we're good to go.

Moving for 5.9 consideration.

[sabernhardt]

The word-break: break-word styling works for me in modern Windows 10 browsers, as it does for the backtoblog link (ticket:52776#comment:8).

However, ​MDN Web Docs note that this value is deprecated for word-break. Using word-wrap: break-word also works for me in modern Windows 10 browsers (plus Internet Explorer 11). If we switch to word-wrap, the backtoblog link should have the same.

[hellofromTonya]

Switch to word-wrap for better cross browser support. Includes changing #backtoblog for consistency.

[hellofromTonya]

With 37617.3.diff applied, works in Chrome, Firefox, Safari, and Edge ✅

[hellofromTonya]

Per @sabernhardt suggestions, 37617.3.diff​ switches to word-wrap: break-word for better cross-browser support and to avoid the deprecation. For consistency, changes #backtoblog to match. Marking for commit.

[hellofromTonya]

Preparing commit.

[hellofromTonya]

In 52174:

Login and Registration: Wrap long usernames in login error message.

Adds word-wrap: break-word to wrap long usernames in the login's error message. Using word-wrap instead of word-break for better cross-browser support and to avoid the deprecation (see Ref below).

For consistency, also changes #backtoblog.

Ref:

• word-break: break-word deprecation ​https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#syntax

Follow-up to [51108].

Props soniakash, audrasjb, sabernhardt, hellofromTonya, desrosj, ocean90.
Fixes #37617.

[hellofromTonya]

Thank you everyone for contributing! The fix has been committed and will ship with 5.9.