button-with-ellipsis.html | Explore in Territory

<!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;
        color: black;
        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>

chromium/third_party/blink/web_tests/fast/forms/button-with-ellipsis.html