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
}
}
}
样式：{width: 160px overflow: hidden text-overflow:ellipsis white-space: nowrap}
说明：
white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
white-space: nowrap/*强制一行显示*/overflow: hidden/*超出部分隐藏*/
text-overflow: ellipsis/*超出部分用省略号代替*/
具体可以自己测试一下 ，这样你的印象会很深刻
