| <!DOCTYPE html> | |
| <style> | |
| div { | |
| font-size: 10px; | |
| border: 1px blue solid; | |
| width: 10ch; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .padding > div { | |
| padding-right: 4ch; | |
| } | |
| .inline-block { | |
| background: red; | |
| display: inline-block; | |
| width: 4ch; | |
| height: 1em; | |
| } | |
| .layer { | |
| transform: translateY(0px); | |
| } | |
| </style> | |
| <body> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <section class="padding"> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| <div>123456789012</div> | |
| </section> | |
| </body> |