text-overflow-026.html (1740B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Test: text-overflow with leading white-space</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1403986"> 10 <link rel="help" href="https://www.w3.org/TR/css3-ui/#text-overflow" title="5.2. the 'text-overflow' property"> 11 <link rel="match" href="text-overflow-026-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font:16px/1 monospace; 15 } 16 17 .ellipsize { 18 white-space: nowrap; 19 overflow: hidden; 20 text-overflow: ellipsis; 21 width: 100px; 22 border: 1px solid; 23 } 24 25 .inline-block { 26 display: inline-block; 27 background: red; 28 } 29 </style> 30 </head> 31 <body> 32 33 <pre> 34 The test PASS if all of the following are true: 35 1. there are no red areas 36 2. the first two blocks display "PASS" but no ellipsis 37 3. the last three blocks display an ellipsis 38 </pre> 39 40 <div class="ellipsize"> 41 <span style="margin-left:5px"></span><span class="inline-block" style="background:lime"> 42 PASS PASS PASS PASS PASS</span> 43 </div> 44 45 <div class="ellipsize"> 46 <span style="margin-left:5px"></span> 47 <span class="inline-block" style="background:lime"> 48 PASS PASS PASS PASS PASS</span> 49 </div> 50 51 <div class="ellipsize"> 52 <span style="margin-left:10px"></span> <span class="inline-block"> 53 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> 54 </div> 55 56 <div class="ellipsize"> 57 <span class="inline-block"> 58 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> 59 </div> 60 61 <div class="ellipsize"> 62 a<span class="inline-block"> 63 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> 64 </div> 65 66 </body> 67 </html>