input输入框显示不全是用省略号...代替

1.想要的效果样式是这样的

2.实现方式

input 框必须要设置width和overflow属性,否则text-overflow不生效

input{

 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

当text-overflow值为ellipsis时表示 文本溢出是显示省略符号来代表被修剪的文本。