Posted about 8 years ago. Visible to the public.

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

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Henning Koch
Last edit:
almost 7 years ago
Attachments:
count_lines.js
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more