建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了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)非常簡單，給元素加個(gè)寬度，然后再加這三句css即可：
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;有沒有想過給input="text"元素也加這個(gè)效果呢？如圖：
input實(shí)現(xiàn)文字超出省略號(hào)功能
文字超出寬度自動(dòng)變成省略號(hào)
其實(shí)，讓input實(shí)現(xiàn)文字超出自動(dòng)變省略號(hào)也非常簡單，還是那三段代碼。經(jīng)測試，目前(2018-11-23)為止，只有最新的Chrome、Firefox兩個(gè)瀏覽器支持，移動(dòng)端未測試！
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享input實(shí)現(xiàn)文字超出省略號(hào)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!
文章名稱：input實(shí)現(xiàn)文字超出省略號(hào)的方法
網(wǎng)站URL：http://www.dlmjj.cn/article/gcsehe.html
