Use different CSS depending on whether elements render on the same line or multiple lines

Updated . Posted . Visible to the public.

You will find this useful when creating responsive designs that work well on small screens.

The attached Javascript gives a container different CSS classes (single_line or multiple_lines) depending on whether its children render on one line or multiple lines.

Initialize it with the selectors for container and children:

$(function() {
  $('.navigation').countLines('a');
});

You can now use different CSS styles like this:

.navigation
  &.single_line a
    // styles when all anchors are rendered on the same line
  &.multiple_lines a
    // styles when anchors are rendered on multiple lines
Henning Koch
Last edit
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2012-05-30 09:22)