给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');
});