break-boundary-2-chars-001.html (1967B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: soft wrap opportunity at boundary between two characters</title> 6 7 <!-- 8 9 CSS3 Text, §5.1 Line breaking details, 7th bullet, 2nd sentence 10 https://www.w3.org/TR/css-text-3/#line-break-details 11 12 " 13 For soft wrap opportunities defined by the boundary between 14 two characters, the white-space property on the nearest 15 common ancestor of the two characters controls breaking 16 " 17 18 --> 19 20 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 21 <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property"> 22 <link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-details"> 23 <link rel="match" href="reference/break-boundary-2-chars-001-ref.html"> 24 25 <meta content="This test checks that the word-break property does not apply to a run of text that is styled with 'white-space: pre' because the word-break property has no rendering effect in cases where lines of text are not allowed to break. Between the 'c' and 'x' and between the 'z' and 'd', there must be a line break because the 'white-space' declaration in effect in the nearest common ancestor of each of these pairs of two characters allows text wrapping." name="assert"> 26 27 <style> 28 div 29 { 30 display: inline-block; 31 font-size: 32px; 32 margin-right: 5ch; 33 width: 0; 34 word-break: break-all; 35 } 36 37 span 38 { 39 white-space: pre; 40 } 41 42 div#first-sub-test 43 { 44 white-space: normal; 45 } 46 47 div#second-sub-test 48 { 49 white-space: pre-wrap; 50 } 51 52 div#third-sub-test 53 { 54 white-space: break-spaces; 55 } 56 57 div#fourth-sub-test 58 { 59 white-space: pre-line; 60 } 61 </style> 62 63 <div id="first-sub-test">abc<span>xyz</span>def</div><div id="second-sub-test">abc<span>xyz</span>def</div><div id="third-sub-test">abc<span>xyz</span>def</div><div id="fourth-sub-test">abc<span>xyz</span>def</div>