text-overflow-002

text-overflow - ellipsis - the broken textual content instead of ellipsis

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Test checks that an ellipsis (...) is shown instead of overflowing textual content

Source

 1 <!DOCTYPE html>
 2 <html><head><meta charset="utf-8">
 3 <title>CSS Basic User Interface Test: text-overflow - ellipsis - the broken textual content instead of ellipsis</title>
 4 <link href="http://www.intel.com/" rel="author" title="Intel">
 5 <link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
 6 <link href="http://www.w3.org/TR/css3-ui/#text-overflow" rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property">
 7 <link href="reference/text-overflow-002-ref.htm" rel="match">
 8 <meta content="" name="flags">
 9 <meta content="Test checks that an ellipsis (...) is shown instead of overflowing textual content" name="assert">
10 <style>
11   div {
12     font-size: 10px;
13     overflow: hidden;
14     text-overflow: ellipsis;
15     width: 150px;
16   }
17   span {
18     font-family: Ahem;
19     font-size: 30px;
20   }
21 </style>
22 </head><body>
23   <p>PREREQUISITE: The font used must have a glyph for the U+2026 character.</p>
24   <p>Test passes if there is an <strong>ellipsis</strong> after a black rectangle below.</p>
25   <div>
26     <span>TestChecksThatTheBrokenContentRepalcedByEllipsis</span>
27   </div>
28 
29 </body></html>