block-ellipsis-032.tentative.html (1492B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: block-ellipsis after hanging whitespacce</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis"> 6 <link rel="match" href="reference/block-ellipsis-032-ref.html"> 7 <meta name="assert" content="If the block-ellipsis soft wrap opportunity is preceded by hangable whitespace, it is removed before placing the ellipsis."> 8 <style> 9 .clamp { 10 line-clamp: 1; 11 border: 1px solid black; 12 font-family: monospace; 13 margin-bottom: 1em; 14 /* The non-hanging text in the first line is 22 to 26ch, plus 1ch for the ellipsis. The hanging whitespace is extra 8ch */ 15 width: 29ch; 16 } 17 .right { 18 text-align: right; 19 } 20 .justified { 21 text-align: justify; 22 } 23 .green { 24 color: green; 25 font-weight: bold; 26 } 27 .hangs { 28 white-space: pre-wrap; 29 background-color: red; 30 } 31 </style> 32 33 <p>Test passes if the text in the following blocks, including the ellipsis, is aligned to the proper 34 margin, and if they all have some green text and no red.</p> 35 36 <div class="clamp"> 37 This text is <span class="green">left-aligned</span><span class="hangs"> </span>Clamped 38 </div> 39 <div class="clamp right"> 40 This text is <span class="green">right-aligned</span><span class="hangs"> </span>Clamped 41 </div> 42 <div class="clamp justified"> 43 This text is <span class="green">justified</span><span class="hangs"> </span>Clamped 44 </div>