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

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

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;

有沒(méi)有想過(guò)給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í)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：input實(shí)現(xiàn)文字超出省略號(hào)的方法
轉(zhuǎn)載源于：http://www.chinadenli.net/article44/gcsehe.html

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

廣告

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