| <!DOCTYPE html> |
| <script src="../../resources/ahem.js"></script> |
| <p>There should be 5 short vertical lines below.</p> |
| <div style="columns:6; column-gap:2px; column-rule:2px solid; width:250px; font:20px/14px Ahem; orphans:1; widows:1;"> |
| <!-- We set a 20px tall font and a line height of 14px, so that text will overflow their line |
| boxes. We thus get 6px of overflow, and the text will overflow the line equally above and |
| below the line box, so that we have 3px on each side. The 3px of overflow below the lines |
| needs to be counted as space shortage by the column balancer, or it will erroneously |
| stretch the columns so much that two lines of text will fit in each column, leaving empty |
| columns at the end. Which would be silly, given that we have 6 lines of equal height and 6 |
| columns. --> |
| |
| <br> |
| <br> |
| <br> |
| <br> |
| <br> |
| <br> |
| </div> |
