| <!DOCTYPE html> |
| <title>CSS Text Test: soft-hyphen and float clearance</title> |
| <link rel="match" href="reference/hyphens-vs-float-clearance-001-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1902974"> |
| <link rel="author" href="mailto:jkew@mozilla.com"> |
| <style> |
| .outer { |
| font: 16px/1.4 monospace; |
| width: 6ch; |
| border: 1px solid gray; |
| float: left; |
| margin: 10px; |
| hyphens: manual; |
| } |
| .float { |
| float: right; |
| width: 2ch; |
| background: lightblue; |
| } |
| .h1 { |
| height: 1em; |
| } |
| .h2 { |
| height: 2em; |
| } |
| .h3 { |
| height: 3em; |
| } |
| .h4 { |
| height: 4em; |
| } |
| </style> |
| <body lang="en"> |
| <div class="outer"><div class="float h1"></div>hy­phen­ate!</div> |
| <div class="outer"><div class="float h2"></div>hy­phen­ate!</div> |
| <div class="outer"><div class="float h3"></div>hy­phen­ate!</div> |
| <div class="outer"><div class="float h4"></div>hy­phen­ate!</div> |
