input实现文字省略号功能
普通元素实现文字超出宽度自动变成省略号非常简单,给元素加个宽度,然后再加这三句css即可:
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
有没有想过给input="text"元素也加这个效果呢?如图:
文字超出宽度自动变成省略号
其实,让input实现文字超出自动变省略号也非常简单,还是那三段代码。经测试,目前(2018-11-23)为止,只有最新的Chrome、Firefox两个浏览器支持,移动端未测试!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114290.html
摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...
摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...
摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...
摘要:如何在图片开始加载时获取大小可以在这里找到。其他不平铺横向平铺纵向平铺固定滚动水平居中水平居中并垂直居中二关闭隐藏滑动上下事件属性可返回事件的目标节点触发该事件的节点,如生成事件的元素文档或窗口。的结合示例关闭隐藏滑动一、关于样式(CSS) 1、Input 1)Input可编辑可下拉 item1 item2 2)Input下拉 ...
阅读 1420·2021-09-10 11:27
阅读 2376·2019-08-30 15:53
阅读 1225·2019-08-30 13:10
阅读 2953·2019-08-30 11:09
阅读 1055·2019-08-29 17:23
阅读 636·2019-08-29 17:05
阅读 2919·2019-08-29 15:10
阅读 2327·2019-08-29 13:22