text-overflow-ellipsis-003-ref.html (527B)
1 <!DOCTYPE html> 2 <style> 3 .container { 4 display: flex; 5 } 6 7 .cell { 8 white-space: nowrap; 9 overflow: hidden; 10 border: 1px solid red; 11 text-overflow: ellipsis; 12 } 13 14 span { 15 display: inline-block; 16 background: green; 17 width: 30px; 18 height: 1em; 19 padding: 4px; 20 margin: 5px; 21 } 22 </style> 23 <div id="target" class="container" style="width: 150px;"> 24 <div class="cell"> 25 <span></span><span></span><span></span><span></span> 26 </div> 27 <div class="cell"> 28 <span></span><span></span><span></span><span></span> 29 </div> 30 </div>