Lines display incorrectly with hyphenated words

[kjbrum]

Hyphenated words get treated as a single word (which makes sense), but this can cause the second part of the word to break to a new line and causes issues when animating.

Example of the behavior can be seen here: https://codepen.io/kjbrum/pen/jOEoNMx

[notoriousb1t]

We could consider treating hyphenated words as separate words. There is some nuance here though. I am not sure if the hyphen should be considered a separate word or if the hyphen should end up on the first word. WDYT @shshaw ?

[kjbrum]

That's a good point. I ended up replacing each hyphen with <span class="hyphen">-</span>.

[Gbillington1]

@kjbrum How did you do this? Looking for a solution :)

[kjbrum]

@Gbillington1 You can find an iteration of my final solution here. I believe I had to make some adjustments after I implemented it into my project, but it should help a bit.

https://codepen.io/kjbrum/pen/rNagKgX

[Gbillington1]

Thanks! @kjbrum