line-break-anywhere-003.html (1265B)
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="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> 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-003-ref.html"> 9 <meta name="assert" content="line-break: anywhere means lines may break between any two typographic letter units."> 10 <style type='text/css'> 11 .test { line-break: anywhere; } 12 /* the CSS below is not part of the test */ 13 .test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } 14 </style> 15 </head> 16 <body> 17 <div id='instructions'>Test passes if the two orange boxes are the same.</div> 18 <div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div> 19 <div class="ref"><span>Latin latin latin lati<br/>n</span></div> 20 <script> 21 var sentenceWidth = document.getElementById('testspan').offsetWidth 22 document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' 23 </script> 24 </body> 25 </html>