The input text exceeds the ellipses (code example)

The content this article brings to you is about the implementation of input text beyond the ellipsis (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Input realizes the text ellipsis function

It is very simple for ordinary elements to realize that the text exceeds the width and automatically becomes an ellipsis. Add a width to the element, and then add these three Just use css:

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

Have you ever thought about adding this effect to the input="text" element? As shown in the picture:

input realizes the text beyond the ellipses function

<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>文字超出宽度自动变成省略号</h2>
<div>
    <input>
</div>

In fact, let input realize the text beyond Automatically changing the ellipses is also very simple, it’s the same three pieces of code. After testing, as of now (2018-11-23), only the latest Chrome and Firefox browsers support it, and the mobile version has not been tested!

The above is the detailed content of The input text exceeds the ellipses (code example). For more information, please follow other related articles on the PHP Chinese website!