I've discovered that there are different ways the soft hyphen can break up a word, depending on the width of the word wrapper.
The JSFiddle example shows this clearly.
The first two words (in the example) look like I expect them to, but the last two are a mystery to me. Can someone tell me why ­ is displayed with the dash in the end of the word?
Edit: As Oriol points out, different browsers and environments produce different views. Here is a picture of what I see:
