input文本溢出显示省略号

1、css有input超出文本显示省略号的样式：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

但是这种方式实现有两个弊端：
1）不能实现：文本没有溢出不显示title,只有当文本溢出时才显示title
2）当文本输入框disabled状态时，鼠标仍可拖动input内文本，拖动幅度较大时，输入框显示为空白

2、采用jQuery/Js实现文本溢出显示省略号方式
var resultName = 0; //定义全局变量
//使用
resultName = 0;
var copyPageElement = ("<pre>" + name + "</pre>").css({ display: 'none' });//定义和页面上input元素文本一致的元素，并且设置dispaly:'none'，即元素宽度显示所有文本
$("body").append(trueEle);
if (currWidth < trueEle.width()) {//实际宽度小于全显示宽度
trueEle.text(trueEle.text().substring(0, trueEle.text().length - 3));
resultName = trueEle.text()+"....";
trueEle.remove();
return getAdaptingName(trueEle.text(), currWidth);//开始递归，直到trueEle元素的宽度不大于currWidth
} else {
trueEle.remove();
if (resultName !== 0) {
return resultName;
} else {
return name;
}
}
}

image.png image.png