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

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

input實作文字省略號功能

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

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

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

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

<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;
    }
    h2{
        width: 300px;
        margin: 10px auto;
    }
</style>

<h2 id="文字超出宽度自动变成省略号">文字超出宽度自动变成省略号</h2>
<div>
    <input>
</div>

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

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