input实现文字超出省略号功能

NoraXie 发布于2019-08-29 17:23 / 1072人阅读

input实现文字省略号功能

普通元素实现文字超出宽度自动变成省略号非常简单，给元素加个宽度，然后再加这三句css即可：

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

有没有想过给input="text"元素也加这个效果呢？如图：

input实现文字超出省略号功能



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

其实，让input实现文字超出自动变省略号也非常简单，还是那三段代码。经测试，目前(2018-11-23)为止，只有最新的Chrome、Firefox两个浏览器支持，移动端未测试！

GPU云服务器云服务器 js文字省略号 html5省略文字 webrtc实现网页文字聊天实现WEBRTC功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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