41 lines
1.1 KiB
HTML
41 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
|
|
<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>
|