Character-by-character reveal in multiline text, correct word wrap [closed]

18 hours ago 1
ARTICLE AD BOX

I'm writing an HTML/CSS/JS-only webapp that reveals text character by character. I currently have two elements in the same text box, where the "ghost text" determines the final size of the box, and the other progressively reveals via Javascript.

The problem I'm encountering is that, at the end of a line, the text often goes past the "ghost text" and wraps around abruptly to the next line, which makes it jarring to look at.

Animated demonstration of block text revealing character by charater, suddenly breaking to the next line on the second and third lines

How would I prevent this while preserving kerning between characters?

I've tried to use the Pretext library, but since this is a single-page webapp without Node.js, I can't use that.

Read Entire Article