Optional line-breaking HTML entity that is always invisible
Solution 1:
​
is the HTML entity for a unicode character called the zero-width space (ZWSP).
"In HTML pages, this space can be used as a potential line-break in long words as an alternative to the
<wbr>
tag."- Zero-width space - Wikipedia
The <wbr>
tag also works, as mentioned by Aaron's answer. I think I prefer the HTML entity over the tag because the entity seems simpler: unicode handles it, not the web browser.
Solution 2:
<wbr>
looks like it does what you want, but it looks like the support for it, and ­
for that matter, is very inconsistent. So unfortunately, there may not be a particularly good way to do what you want.