0

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

Ahmed Salman Tahir
  • 1,783
  • 1
  • 17
  • 26
paperboy
  • 201
  • 2
  • 11
  • I can't see any problem with your fiddle. `line-height` property would be applied to *all elements* per Spec. – Hashem Qolami Feb 06 '14 at 17:59
  • add display:inline-block to the style of your span. Good info: http://stackoverflow.com/questions/11829393/why-the-spans-line-height-is-useless – kasper Taeymans Feb 06 '14 at 17:59
  • you can tune tinyMce to add a class to your span, any how, in the main CSS you can set span {display:inline; /*vertical-align:something else than baseline if neede */;} – G-Cyrillus Feb 06 '14 at 18:04
  • http://www.tinymce.com/tryit/custom_formats.php see this to find out how to custom your spans from within tinyMce :) – G-Cyrillus Feb 06 '14 at 18:08
  • as said the problem with display: inline-block is that i get an break with each span and since tinymce adds a new span for every line you hit shit+enter, its not a posssible solution: @GCyrilllus: thanks ill try that. for classes: iam only use the script cause if i use multiple classes tiny mce always adds the classes and i dont wont the user to always click away the old style and the click again for the new styles. – paperboy Feb 06 '14 at 18:33
  • Look this answer that I have sent to a similar question [link here in stackoverflow](https://stackoverflow.com/questions/11595702/setting-up-line-height-via-tinymce/58452925#58452925) – rezaSefiddashti Nov 03 '19 at 08:02

1 Answers1

0

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

Dale
  • 1,911
  • 11
  • 18