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

成都創(chuàng)新互聯(lián)主打移動網(wǎng)站、成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名注冊、等互聯(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)文字超出省略號功能

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

其實，讓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í)!

網(wǎng)頁標(biāo)題：input實現(xiàn)文字超出省略號的方法
轉(zhuǎn)載源于：http://m.newbst.com/article44/gcsehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站營銷、企業(yè)建站、網(wǎng)站收錄、微信公眾號、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)