text-overflow-016.html (1518B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: clipping the ellipsis</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 5 <link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details"> 6 <link rel="match" href="reference/text-overflow-016-ref.html"> 7 <meta name="flags" content="ahem"> 8 <meta name="assert" content="If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 .test, .test2 { 12 overflow: hidden; 13 text-overflow: ellipsis; 14 width: 100px; 15 white-space: pre; 16 font: 50px/1 Ahem; 17 height: 20px; 18 position: relative; 19 } 20 span { 21 display: inline-block; 22 width: 60px; 23 height: 1em; 24 vertical-align: bottom; 25 } 26 27 /* if the ellipsis is shorter than the expected 40px (or misplaced) the red background will show */ 28 .test { 29 color: green; 30 background: url("support/1x1-red.png") right / 40px auto no-repeat; 31 } 32 33 /* if the ellipsis (which is red) is longer that the expected 40px (or misplaced), it won't be fully covered by the green abspos */ 34 .test2 { color: red; } 35 .test2::after { 36 content: ""; 37 position: absolute; 38 top: 0; right: 0; bottom: 0; 39 width: 40px; 40 background: green; 41 } 42 </style> 43 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 <div class=test><span></span>filler text to make things overflow</div> 46 <div class=test2><span></span>filler text to make things overflow</div>