input實現文字超出省略號功能

input實現文字省略號功能

普通元素實現文字超出寬度自動變成省略號非常簡單，給元素加個寬度，然後再加這三句css即可：

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

有沒有想過給input="text"元素也加這個效果呢？如圖：

input實現文字超出省略號功能

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        padding: 15px;
        border: 1px solid #f60;
        margin: 50px auto;
    }
    .form-control{
        height: 30px;
        line-height: 30px;
        padding: 5px 10px;
    }
    .text-ellipsis{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    h2{
        width: 300px;
        margin: 10px auto;
    }
</style>

<h2 class="text-ellipsis">文字超出寬度自動變成省略號</h2>
<div class="box">
    <input type="text" class="form-control text-ellipsis">
</div>

其實，讓input實現文字超出自動變省略號也非常簡單，還是那三段代碼。經測試，目前(2018-11-23)爲止，只有最新的Chrome、Firefox兩個瀏覽器支持，移動端未測試！