CODEWITHSUNDEEP
javascriptjquery
Kitson
Kitson

Reputation: 1283

Multiple font sizes - Javascript/jQuery typing effect

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? (i.e. 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.

Upvotes: 0

Views: 48

Answers (1)

beautifulcoder
beautifulcoder

Reputation: 11340

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.

Upvotes: 1

Related Questions