| <!DOCTYPE html> | |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | |
| <style> | |
| .spacer { | |
| background: lightgray; | |
| block-size: 100px; | |
| } | |
| .target { | |
| font: 50px/2 Ahem; | |
| height: 275px; | |
| } | |
| .clamp { | |
| line-clamp: 3; | |
| } | |
| @supports not (line-clamp: 3) { | |
| .clamp { | |
| -webkit-line-clamp: 3; | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| } | |
| </style> | |
| <div class="spacer"></div> | |
| <div class="target clamp"> | |
| A<br> | |
| B<br> | |
| C<br> | |
| D</div> | |
| <div class="spacer"></div> |