本篇文章給大家帶來的內容是關于input實現文字超出省略號(代碼示例)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

input實現文字省略號功能

普通元素實現文字超出寬度自動變成省略號非常簡單，給元素加個寬度，然后再加這三句css即可：white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

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

input實現文字超出省略號功能

*{

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;

}

h2{

width: 300px;

margin: 10px auto;

}

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

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