您现在的位置是:群英 > 开发技术 > web开发
文字能超出省略号吗,input如何实现
Admin发表于 2022-06-23 17:08:1438 次浏览
这篇文章主要为大家详细介绍了文字能超出省略号吗,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 class="text-ellipsis">文字超出宽度自动变成省略号</h2>
<div class="box">
    <input type="text" class="form-control text-ellipsis">
</div>

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



以上就是关于文字能超出省略号吗,input如何实现的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: ellipsis
相关信息推荐
2022-04-28 17:44:23 
摘要:html图片设置透明度的方法:1、在img元素中使用style属性设置“opacity: 透明度值;”样式;2、在img元素中使用style属性设置“filter:opacity(透明度值);”样式。
2022-05-11 16:09:32 
摘要:在bootstrap中,data的意思是定义自定义属性,自定义属性一般使用“data-”开头,data属性的应用可以让HTML标签可以隐式的附带一些数据,而Javascript就可以对这些属性数据进行读写操作。
2022-06-16 17:05:11 
摘要:golang不是单进程的,而是多线程;golang的线程模型是M P G模型,整体上Go程与内核线程是多对多对应的,因此首先来讲就一定是多线程的。
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部