line-break-anywhere-002.html (1236B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <meta charset="utf-8"> 4 <title>CSS Text Test: line-break: anywhere</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 6 <link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break"> 7 <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere"> 8 <link rel="match" href="reference/line-break-anywhere-001-ref.html"> 9 <meta name="assert" content="line-break:anywhere puts a soft wrap opportunity betwwen letters in the middle of words and hyphenation is not applied."> 10 <style> 11 #green { 12 position: absolute; 13 background: green; 14 font-family: monospace; 15 width: 1ch; 16 height: 19em; 17 } 18 #test { 19 width: 1ch; 20 line-height: 1; 21 color: red; 22 font-family: monospace; 23 line-break: anywhere; 24 hyphens: auto; 25 } 26 </style> 27 28 <p>Test passes if there is a green rectangle below and no red.</p> 29 <div id=green></div> 30 <!-- Hyphenation, if it occurs, will produce a hyphen that sticks out from under the green rectangle. 31 Also, if the words fails to be wrapped between all letters, letters will also stick out from under the green rectangle --> 32 <div id=test>no hyphenation</div>