<ul id="cy0gs"></ul>

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

NoraXie 發布于2019-08-29 17:23 / 1074人閱讀

input實現文字省略號功能

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

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

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

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



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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114290.html

寫網頁時拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區域的特定元素。 content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box：（textarea和select默認值）在規定的一個框的寬高之內給這...

econi 2019-08-20 18:21 評論0 收藏0
寫網頁時拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區域的特定元素。 content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box：（textarea和select默認值）在規定的一個框的寬高之內給這...

rubyshen 2019-08-29 13:03 評論0 收藏0
寫網頁時拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區域的特定元素。 content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box：（textarea和select默認值）在規定的一個框的寬高之內給這...

QiShare 2019-08-01 17:16 評論0 收藏0
前端經常遇到的的問題

摘要：如何在圖片開始加載時獲取大小可以在這里找到。其他不平鋪橫向平鋪縱向平鋪固定滾動水平居中水平居中并垂直居中二關閉隱藏滑動上下事件屬性可返回事件的目標節點觸發該事件的節點，如生成事件的元素文檔或窗口。的結合示例關閉隱藏滑動一、關于樣式（CSS） 1、Input 1）Input可編輯可下拉　 item1 item2 2）Input下拉 ...

番茄西紅柿 2019-04-23 13:32 評論0 收藏0