管理后台的项目
甲方提供了静态HTML；我们负责前台和后台的逻辑部分； 不是国内的项目，不用考虑过多的浏览器；目前测试只用测试Chrome、Firefox、Safari及Edge；
指摘
上传文件的input框，甲方提指摘上传的文件名没有全部显示，中间有省略号；
需求
需求：文件名需全部显示，可换行，input框上传按钮的样式要求不变动；
我直接在浏览器(Chrome)页面上通过修改css，便可以实现需求；没有多浏览器的测试，便喜滋滋的提交了代码，把票指给测试了；
width: 100%;white-space: break-spaces;
测试结果
只有在Chrome浏览器及Edge浏览器(Chrome内核)上文字会换行且全部显示
Firefox及Safari 文字不可以换行，若文件名很长也只会显示一行中间是省略号；
再修改
我知道有各种方法可以解决这个问题，但是由于甲方要求尽量不要变动相关的样式，所以我想不要过多的变动；
我的做法
区分浏览器去对应；只对应需要对应的浏览器，Chrome内核的浏览器的样式是好的，那就可以不用对应了；
针对需对应的浏览器，通过js监听input框的change 事件，获取到上传文件的文件名，在input框后插入元素，然后通过css设置margin-top 为负值，遮盖住原有的文字；通过text-indent 文字缩进、pointer-events 指针属性 不影响原有input框的上传功能；
相关代码如下：
'<p class="csv_name"><mark>'+file.name+'</mark></p>';
.csv_name {text-align:justify;pointer-events: none;text-indent: 61px;margin-top: -27px}
.csv_name mark {background: #ffffff;font-style: normal;font-weight: inherit;pointer-events: all;}
这样就可以达到需求
经过这一番折腾，测试终于通过了；不由感叹 Chrome真的太友好了，哈哈；这只是开发中有点波折的经验记录，若有何不妥之处，请大家热情指出，谢谢！
