An example of this in the wild,
https://ml.wikipedia.org/w/index.php?title=%E0%B4%B2%E0%B4%BF%E0%B4%AF%E0%B4%A8%E0%B4%BE%E0%B5%BC%E0%B4%A1%E0%B5%8B_%E0%B4%A1%E0%B4%BE_%E0%B4%B5%E0%B4%BF%E0%B4%9E%E0%B5%8D%E0%B4%9A%E0%B4%BF&oldid=2429803#.E0.B4.B6.E0.B4.BE.E0.B4.B8.E0.B5.8D.E0.B4.A4.E0.B5.8D.E0.B4.B0.E0.B5.80.E0.B4.AF.E0.B4.AA.E0.B4.B0.E0.B4.AE.E0.B4.BE.E0.B4.AF_.E0.B4.AA.E0.B4.A0.E0.B4.A8.E0.B4.99.E0.B5.8D.E0.B4.99.E0.B5.BE

@cscott points out that <figure> only accepts global attributes, so style will likely be necessary to prevent the overflow.

In T171761#3518573, @Arlolra wrote:

@cscott points out that <figure> only accepts global attributes, so style will likely be necessary to prevent the overflow.

I don't understand this comment. Can you clarify - how does figure accepting *only* global attributes lead to the requirement of a style attribute?

It doesn't respect a "width" attribute, so adding it won't have any effect.

In T171761#4130698, @Arlolra wrote:

It doesn't respect a "width" attribute, so adding it won't have any effect.

Aaah... okay. I was thinking of stylesheet CSS and was wondering why that wouldn't work and an inline style attribute is necessary.

Placing word-break: break-word on the <figcaption> might be acceptable for webkit based browsers.

@Volker_E any thoughts on this?

@Arlolra Yes, word-wrap: break-word seems sensible here, together with hyphens. We've got a core LESS .hyphens() mixin for this use case.

Is there anything that's going to work on Firefox though?

break-all

word-wrap: break-all; /* Support: Browsers following CSS Text Module Level 3 WD */
word-wrap: break-word; /* Support: Webkit/Blink */

There's a chance to introduce some glitches with above rules, but in this specific case, it seems better to have the text broken rather to not see it at all.

Sorry, word-wrap is an alias for overflow-wrap, and seems to depend on having a fixed width, so isn't exactly what we're looking for.

word-break: break-all;
word-break: break-word;

is ok, but the inconsistency between browsers irks me.

Maybe I should just add .hyphens(auto); and accept its overzealous hyphenation.

Change 430102 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] Set break-word on figcaption

https://gerrit.wikimedia.org/r/430102

Change 430102 merged by jenkins-bot:
[mediawiki/core@master] Set break-word on figcaption

https://gerrit.wikimedia.org/r/430102

Change 643525 had a related patch set uploaded (by Arlolra; owner: Arlolra):
[mediawiki/core@master] Document the use of "break-word" value in parsoid skinning

https://gerrit.wikimedia.org/r/643525

In https://github.com/wikimedia/mediawiki/commit/16b76a486d774e31283a62c0a17cfc9f356ca106 we changed the figcaption from display: table-caption; to display: block; since the figcaption wasn't always present and we didn't want the bottom border to depend on it.

We started always adding the figcaption in https://github.com/wikimedia/parsoid/commit/3a0dff6aa4c0a0525f075f4164c7c6d41b80b66c for consistency and in case we wanted to switch back to the old styling.

However, none of that should matter for the overflow here because, as the description above says, the figure isn't fixed width. Just mentioning because at some point I thought it was related?

Anyways, the solution of word-break: break-word, while well supported, is using a deprecated value. The spec instead suggests,

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

So, presumably, we should be able to use the following and be done with it,

word-break: normal;
overflow-wrap: anywhere;

Unfortunately, this is less well supported than the deprecated value, for now. The patch in T171761#6649180 tries to clarify this.

The legacy parser emits a div with a "thumbinner" class that has overflow: hidden; which works because it also sets a fixed width on it. As above, T171761#3518573, that's not a valid attribute on figure. Also, hiding the content is arguably a worse presentation than breaking the word.

Change 643525 merged by jenkins-bot:
[mediawiki/core@master] Document the use of "break-word" value in parsoid skinning

https://gerrit.wikimedia.org/r/643525