hyphens-none-014.html (1196B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 3 Test: Line breaking with floats and disabled hyphenation </title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/> 5 <link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 8 <meta name="assert" content="A span with hypens 'none' is wrapped based on the available space left by a float image."> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 div { font: 20px/1 Ahem; } 12 img { float:right; } 13 .test { 14 max-width: 100px; 15 color: green; 16 } 17 span { hyphens: none; } 18 .ref { 19 position: absolute; 20 background: green linear-gradient(red, red) 2ch 0/3ch 3ch no-repeat; 21 color: red; 22 width: 100px; 23 height: 100px; 24 z-index: -1; 25 } 26 </style> 27 <p>Test passes if there is a filled green square.</p> 28 <div class="ref">XX<br>X</br></div> 29 <div class="test"> 30 <img src="/css/support/60x60-green.png" alt=""> 31 <span>XX X</span> 32 </div>