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

成都創(chuàng)新互聯(lián)主打移動網(wǎng)站、成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、域名注冊、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

input實現(xiàn)文字省略號功能

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

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

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

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

文字超出寬度自動變成省略號

    

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

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