input實作文字超出省略號（程式碼範例）

這篇文章帶給大家的內容是關於input實現文字超出省略號（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

input實作文字省略號功能

普通元素實作文字超出寬度自動變成省略號非常簡單，給元素加個寬度，然後再加這三句css即可：

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

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

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

 
文字超出宽度自动变成省略号
 
  

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

以上是input實作文字超出省略號（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！