css word-wrap: break-word won't work

Question

I have two inline span. code sample:

Answer 1

I ran into the same problem, with none of the answers here fixing the problem.

Turns out the template (angular material) I was using applied white-space: nowrap. Removing or overriding this with white-space: normal made word-break: break-all or word-break: break-word work.

Perhaps this will help someone else searching for the same issue.