| <!DOCTYPE html> |
| <style> |
| .button { |
| box-sizing: content-box; |
| width: 20em; |
| height: 2em; |
| border: none; |
| border-radius: 0; |
| padding: 0; |
| font: 16px/2em sans-serif; |
| overflow: hidden; |
| vertical-align: top; |
| text-align: left; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| background: gray; |
| } |
| </style> |
| <p>There should be two gray boxes with overflowing text, truncated with "...".</p> |
| <input type="button" class="button" value="Houses can be built from different kinds of materials. The most common types are brick, wood, and vinyl or synthetic siding. Houses have lawns that need to be tended."> |
| <br><br> |
| <button class="button">Houses can be built from different kinds of materials. The most common types are brick, wood, and vinyl or synthetic siding. Houses have lawns that need to be tended.</button> |
