CODEWITHSUNDEEP
csslineextra
Geert Van de Langenberg
Geert Van de Langenberg

Reputation: 29

multiple line-heights without extra css class

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!

Upvotes: 0

Views: 390

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

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.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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

Upvotes: 2

Related Questions