hyphens-vs-float-clearance-001-ref.html (805B)
1 <!DOCTYPE html> 2 <title>CSS Text Reference: soft-hyphen and float clearance</title> 3 <link rel="author" href="mailto:jkew@mozilla.com"> 4 <style> 5 .outer { 6 font: 16px/1.4 monospace; 7 width: 6ch; 8 border: 1px solid gray; 9 float: left; 10 margin: 10px; 11 hyphens: none; 12 } 13 .float { 14 float: right; 15 width: 2ch; 16 background: lightblue; 17 } 18 .h1 { 19 height: 1em; 20 } 21 .h2 { 22 height: 2em; 23 } 24 .h3 { 25 height: 3em; 26 } 27 .h4 { 28 height: 4em; 29 } 30 </style> 31 <body lang="en"> 32 <div class="outer"><div class="float h1"></div>hy‐<br>phen‐<br>ate!</div> 33 <div class="outer"><div class="float h2"></div>hy‐<br>phen‐<br>ate!</div> 34 <div class="outer"><div class="float h3"></div>hy‐<br>phen‐<br>ate!</div> 35 <div class="outer"><div class="float h4"></div>hy‐<br>phen‐<br>ate!</div>