| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Text: 'hyphens: manual' with 2 explicit hyphenation opportunities (inline)</title> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> | |
| <link rel="match" href="reference/hyphens-manual-inline-011-ref.html"> | |
| <meta content="" name="flags"> | |
| <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert"> | |
| <style> | |
| div | |
| { | |
| border: black solid 2px; | |
| font-family: monospace; | |
| font-size: 32px; | |
| margin-bottom: 0.25em; | |
| width: 10ch; | |
| } | |
| span#test | |
| { | |
| hyphens: manual; | |
| } | |
| div#reference | |
| { | |
| hyphens: none; | |
| } | |
| </style> | |
| <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. | |
| <div>DNA <span id="test">means Deoxy­ribo­nucleic acid</span>.</div> | |
| <div id="reference">DNA means Deoxyribo-nucleic acid.</div> |