Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<link rel="match" href="reference/text-wrap-balance-float-005-ref.html">
<style>
.container {
font: 20px/1.5 monospace;
width: 26.5ch;
border: solid 1px;
text-wrap: balance;
}
.float {
background: yellow;
padding: 0.2em 1ch;
line-height: 1.2;
float: left;
}
.float2 {
background: cyan;
padding: 0.2em 1ch;
line-height: 1.2;
float: right;
}
</style>
<!--
The floats (inc. padding) are 7ch wide, and occupy ~2 lines,
so without balancing, layout would be
+--------------------------+
| FLOAT abcde fghi jklm nop|
| FLOAT qrst uvw FLOAT |
|xyx! FLOAT |
+--------------------------+
Applying text-wrap:balance results in
+--------------------------+
| FLOAT abcde fghi |
| FLOAT jklm nop FLOAT |
|qrst uvw xyx! FLOAT |
+--------------------------+
-->
<div class="container"><div class="float">FLOAT<br>FLOAT</div>abcde fghi jklm nop<div class="float2">FLOAT<br>FLOAT</div> qrst uvw xyz!</div>