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 class="text-ellipsis">文字超出宽度自动变成省略号</h2>

<div class="box">

    <input type="text" class="form-control text-ellipsis">

</div>