多种字体大小-Javascript / jQuery键入效果

Question

I have created a simple typing effect, as Illustrated here: http://jsfiddle.net/kitsonbroadhurst/fzf70ttg/9/

My issue is that as the large text is typed it moves the whole line up and down.

Is it possible to keep the text all on the same level as multiple fonts styles and sizes are added? (ie as large fonts are added the smaller text does not move vertically)

I have tried to use a position: relative wrapper div and then position: absolute to keep everything on the same line, but this did not work.

.wrapper {
    position: relative;
}

.text-box {
    position: absolute; 
    bottom: 0;
}

I would rather not use any type of plugin and would prefer a coded solution.

Answer 1

Set a line height so it won't jump:

p { line-height: 75px; }

With the box model, the browser will calculate the height dynamically according to text size. Putting a hard size on the element will prevent this.