Created attachment 8847908 [details] testcase 1 (Filing this for https://github.com/webcompat/web-bugs/issues/5080 ) STR: 1. Load attached testcase. EXPECTED RESULTS: Hyphens wrap to multiple lines, staying inside of their <div> container. ACTUAL RESULTS: Hyphens do not wrap, and overflow their <div> container.
Chrome 55, Edge 14, Safari, and Opera all give EXPECTED RESULTS. (The latter two I didn't test myself, but I'm going off of reports on the webcompat issue & Blink/WebKit family ties.) Firefox gives ACTUAL RESULTS. So, we're the odd one out on this behavior.
I think other browsers are treating each hyphen as a "soft wrap opportunity", and this is special behavior for hyphens and not for other characters. (karlcow discovered https://www.w3.org/TR/css-text-3/#soft-wrap-opportunity which has some spec text about this, including "CSS does not fully define where soft wrap opportunities occur". So this is a bit under-specified, and we should probably align with other browsers on this case for interop.)
testcase 2 (viewed in other browsers) shows that hyphens are a special case. Edge and Chrome don't break the other long strings in that testcase (with an assortment of other punctuation characters)
(While other browsers treat hyphens as special, we seem to treat percent signs as special in a much weirder way -- I filed bug 1347812 on that.)
masayuki, perhaps you'd be interested in taking this? I see dbaron CC'd you & you added some insight on related bug 1347812. (This bug here is apparently responsible for breaking mobile layout on modemarine.fr, as noted in the webcompat report.)
Yep, hyphen-minus is a really difficult character to break around it. If it's used as "hyphen", we can relax around it, however, it can be used as "minus" or special character especially for command lines and similar cases. E.g., there is a line |ac_add_options --enable-debug|, the "--enable" shouldn't be broken because if it's broken to 2 or more lines, it's really difficult to understand what it means. But I guess, "-" not followed by other characters can be broken.
Example where Chrome's behavior of treating every hyphen as a break opportunity gives poorer results: data:text/html,<div style="font-family:monospace;width:28ch;">double hyphens may be used -- like this -- to stand in for em-dashes Firefox keeps the hyphens together.
You need to log in before you can comment on or make changes to this bug.