inline element line-height (span)

Question

is there any chance ( i don't mind dirty evil tricks ) to get the line-height working on inline elements like < span >? I know that my JSFiddle will work with another doctype but thats not possible since i use a lot of html5 elements. Also i cant use inline-block because tinyMCE adds a span for every line.

Heres the little problem: http://jsfiddle.net/BE7Cz/2/

ps: The case i need this: In my theme (wordpress) i added the ability to tinyMCE that a user can change the line-height and the font-size. With a little script i change the inline styles with jquery afterwards to class names which i can make responsive. This works great except the problem with the inline line-height

$('.wysiwyg p span').each(function() {
    $(this).addClass('font-size-' + $(this).css('fontSize'));
    $(this).addClass('line-height-' + $(this).css('lineHeight'));
}); 

It wouldn't be a probleme if the line-height is always bigger than my body line-height but thats not the case.

Any help is really appreciated. Thanks a lot guys! :)

Best wishes, mike

Answer 1

The span element is an inline element. You will have to add "display:inline-block" to your style of your span.