Read more

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

Henning Koch
May 30, 2012Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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
Posted by Henning Koch to makandra dev (2012-05-30 11:22)