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

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:

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

You can now use different CSS styles like this:

Copy.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