input實(shí)現(xiàn)文字超出省略號(hào)的方法

這篇文章主要介紹了input實(shí)現(xiàn)文字超出省略號(hào)的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

input實(shí)現(xiàn)文字省略號(hào)功能

普通元素實(shí)現(xiàn)文字超出寬度自動(dòng)變成省略號(hào)非常簡(jiǎn)單，給元素加個(gè)寬度，然后再加這三句css即可：

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

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

input實(shí)現(xiàn)文字超出省略號(hào)功能

<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;
    }
    h3{
        width: 300px;
        margin: 10px auto;
    }
</style>

<h3 class="text-ellipsis">文字超出寬度自動(dòng)變成省略號(hào)</h3>
<div class="box">
    <input type="text" class="form-control text-ellipsis">
</div>

其實(shí)，讓input實(shí)現(xiàn)文字超出自動(dòng)變省略號(hào)也非常簡(jiǎn)單，還是那三段代碼。經(jīng)測(cè)試，目前(2018-11-23)為止，只有最新的Chrome、Firefox兩個(gè)瀏覽器支持，移動(dòng)端未測(cè)試！

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享input實(shí)現(xiàn)文字超出省略號(hào)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!