小兄弟需要实现一个下划线可编辑的功能
比如说____________ 这个下划线展示文字，文字可编辑
我之前刚优化音转字的功能，恰巧也有一个录音文字编辑的功能，与其类似
我建议他使用contenteditable属性，使标签内容可编辑 同时去除激活时的边框
css
[contenteditable] {
outline: 0px solid transparent;
}小兄弟坚持自己的选择，采用input模拟，去掉其他边框，保留下边框
我刚开始觉得也行吧，反正功能也能实现
只是觉得为了实现输入文字，下划线跟随的功能，他在实时计算字数，给input宽度很丑陋
上线后，在迭代的过程中，发现文字过多时，不会换行就超出页面(之前那些可编辑的地儿都是短文字)
突然之间，发觉不可迭代了
我第一想法是为了减少变更，就换成textarea模拟，换行可以解决
但是textarea不能自动适应文字的高度，问题变成了如何使textarea自适应高度
计算字数自然不行
遂去找解决方案
canvas中的measureText确实没想到
https://juejin.cn/post/7258337246024613943
照着实现了下，倒是基本可以，但是确实是算不准，最后还是放弃了
所以，设计之前，还是要考虑好不同的情况，设计有什么缺陷，尤其是代码明显很丑陋的时候，往往就是选用的方式是错误的，良好的设计和实现必然是优雅的