Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/white-space/text-wrap-balance-float-005.html - WPT Dashboard Interop Dashboard
<!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>