1800437-1.html (1103B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <style> 4 .test { 5 width: 10em; /* Script below will adjust this. */ 6 } 7 #measure { 8 color: transparent; 9 border: 1px solid transparent; 10 display: inline-block; 11 } 12 p { 13 border: 1px solid gray; 14 margin: 10px; 15 font: 100px/1.5 serif; 16 white-space: nowrap; 17 overflow-x: hidden; 18 text-overflow: ellipsis; 19 direction: rtl; 20 } 21 </style> 22 <div> 23 <p class=test>🌐🌐🌐🌐</p> 24 <p class=test>🌐🌐🌐🌐🌐</p> 25 <p class=test>🌐🌐🌐🌐🌐🌐</p> 26 <p class=test>🌐🌐🌐🌐🌐🌐🌐</p> 27 <p class=test>🌐🌐🌐🌐🌐🌐🌐🌐</p> 28 <p id=measure>🌐</p> 29 </div> 30 <script> 31 /* Set width of the "test" elements to ensure it can fit 4 globe glyphs, 32 plus half a glyph of extra space. */ 33 measure = document.getElementById("measure"); 34 globeWidth = window.getComputedStyle(measure).width.replace("px", ""); 35 document.styleSheets[0].cssRules[0].style.width = 4.5 * globeWidth + "px"; 36 </script>