multiple line-heights without extra css class

Question

Is there a way to have multiple line heights in an unordered list? See the example below, the normal li's have a line height of 25px, but as soon as the sentence gets too long it will split in the same line height as defined before.

http://i46.tinypic.com/w1pdhi.jpg

I would like to have a line height of 16px once the sentence gets too long, without having to give an extra CSS class to the li.

Thanks in advance!

Answer 1

give the same normal line-height to every list-item and apply a margin-bottom to them to create room between each other

Jsbin example

Answer 2

You cannot make the line height depend dynamically on the rendering of a li element on one line vs. several lines. You could to mark the multiline li elements with a class, but being multiline should normally depend dynamically on the available width, instead of being specified statically.

On the other hand, I think that what you are really looking for is a way of setting the vertical spacing between list items. For this, you would simply set vertical margins or padding on them, using a line-height setting that is suitable for the multiline items.