BreakDetective.js

Small piece of js code that detects line break among inline displayed elements (including inline-block, and flex with flex-direction:row). It adds `.broken-line` class when line is broken and calculate (by using largest element) how many elements could fit in the first line as `data-bditems` attribute. Allows you to take control over elements with broken lines by css.

Version: 0.0.2-dev
Dependencies: none (VanillaJS)
License: MIT
Repository, documentation: bitbucket.org/rxl/breakdetective
Author: Rafael Pawlos

Basic usage example:

breakdetective('.container');

Examples

Resize browser till line break to see effect.

Show JS for both examples
breakdetective('.menu, .grid');

Menu

Show CSS
.menu.broken-line li{
  width:33.33%;
}
.menu[data-bditems="2"] li{
  width:50%;
}
.menu[data-bditems="1"] li{
  width:100%;
}
.menu.broken-line li a{
  border-radius: 10px;
}

Grid

Title 1

Some awesome text.

Title 2

Some awesome text.

Title 3

Some awesome text.

Title 4

Some awesome text.

Title 5

Some awesome text.

Title 6

Some awesome text.

Title 7

Some awesome text.

Title 8

Some awesome text.

Title 9

Some awesome text.

Title 10

Some awesome text.

Title 11

Some awesome text.

Title 12

Some awesome text.

Show CSS
.grid[data-bditems="5"] .box{
  width:20%;
}
.grid[data-bditems="4"] .box{
  width:25%;
}
.grid[data-bditems="3"] .box{
   width:33.33%; 
}
.grid[data-bditems="2"] .box{
   width:50%; 
}
.grid[data-bditems="1"] .box{
   width:100%; 
}