word-break-break-all-062.html (1787B)
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <meta charset="UTF-8"> 6 7 <title>CSS Text: 'word-break: break-all' applied to an inline in latin</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 10 <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property"> 11 <link rel="match" href="reference/word-break-break-all-062-ref.html"> 12 13 <style> 14 div 15 { 16 border: orange solid; 17 font: 24px monospace; 18 margin-bottom: 4px; 19 width: 15ch; 20 /* 21 15 in 15ch is an entirely arbitrary number. 22 The test only aims at checking if a word 23 will break. 24 */ 25 } 26 27 div#ws-normal 28 { 29 white-space: normal; 30 } 31 32 div#ws-prewrap 33 { 34 white-space: pre-wrap; 35 } 36 37 div#ws-breakspaces 38 { 39 white-space: break-spaces; 40 } 41 42 div#ws-preline 43 { 44 white-space: pre-line; 45 } 46 47 span.test 48 { 49 word-break: break-all; 50 } 51 </style> 52 53 <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>. 54 55 <div id="ws-normal"><span class="test">A simple sentence in english.</span></div> 56 <!-- 123456789012345 --> 57 58 <div id="ws-prewrap"><span class="test">A simple sentence in english.</span></div> 59 <!-- 123456789012345 --> 60 61 <div id="ws-breakspaces"><span class="test">A simple sentence in english.</span></div> 62 <!-- 123456789012345 --> 63 64 <div id="ws-preline"><span class="test">A simple sentence in english.</span></div> 65 <!-- 123456789012345 --> 66 67 <div id="reference">A simple senten<br>ce in english.</div>