[wp-trac] [WordPress Trac] #47329: Overflowing code element on mobile
WordPress Trac
noreply at wordpress.org
Mon May 20 16:46:05 UTC 2019
#47329: Overflowing code element on mobile
----------------------------+-----------------------------
Reporter: david.binda | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Administration | Version: trunk
Severity: normal | Keywords:
Focuses: |
----------------------------+-----------------------------
Similarly to the responsibility issues reported in #28161 , there seems to
be an issue with overflowing of a `code` element in a table on mobile
devices - specifically Webkit based ones (Chrome, Safari), but also in
Firefox, yet only in an edge (described below).
The issue is reproducible on a vanilla WordPress install on the permalinks
administration page even in a responsive development mode in Chrome.
The current CSS style - `word-wrap: break-word;` feels to be only properly
working in Firefox now (at least in my testing), but only up to a point,
where there is some really long word (see attached screenshot).
Playing around with multiple options, it looks like following combination
fixes the issue across the board:
{{{#!css
@media screen and (max-width: 782px) {
code {
word-wrap: break-word;
word-wrap: anywhere; /* Firefox. Allow breaking long words
anywhere */
word-break: break-word; /* Webkit: Treated similarly to
word-wrap: break-word */
}
}
}}}
I've tested both, the current issue and proposed patch, in Chrome, Safari,
Firefox on both desktop and mobile and it seems to do the trick when
improving the display.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47329>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list