给input框加 text-overflow:ellipsis在ie浏览器失效解决方法

最近做一个toB的项目,各种输入框input,要求输入内容超出部分省略号显示, 大概这个效果(项目使用vue框架):

代码:

<input :title="动态获取对应的value..." style="text-overflow:ellipsis">

在火狐, 谷歌都是差不多如上图的效果, 乖乖到了ie浏览器变成如下:

按理说所有浏览器对text-overflow都是完美支持的呀, 那么锅就出在input上了

几经尝试, 发现吧input 加上readonly="true" 这时 text-overflow:rllipsis就完美生效了.

但是input框变成只读模式,明显不符合需求啊, 所以只好手动切换啦:

//让input可编辑
$('.myInput').on('focus', function() {
  $(this).prop('readonly', '');
  $(this).focus();
})

//让input只读  
$('.myInput').on('blur', function() {
  $(this).prop('readonly', 'readonly');
});

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/gooodi/article/details/102988035
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-04-19 13:45:05
阅读 ( 1187 )
分类：

给input框加 text-overflow:ellipsis在ie浏览器失效解决方法

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

给input框加 text-overflow:ellipsis在ie浏览器失效 解决方法

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

给input框加 text-overflow:ellipsis在ie浏览器失效解决方法