描述 ：因为要做一个文字动画，要使得一段文字中的每个文字单独执行动画，所以必须将每个文字进行分离，计算出原本文字在这一段文字当中的位置
思路 1
起初的思路是根据这一段的文字的文字属性，例如字体大小 , 字间距 , 行高等来计算出每个文字的位置坐标，但是过程当中遇到诸如此类的问题：
- 中文汉字和英文字母在同样属性下所占的空间不同
- 各种符号所占空间不同
- 中英文情况下的符号也表现各不相同
当时面对这些问题时，就停止了这条思考路线，要不就是一点点适配，就算到时候结果出来了，估计在时间成本和效果上也不是很满意
思路 2
利用系统自己的渲染方式去实现。
- 将每个文字用 ++span++ 标签来包裹。
- 新增加一块区域包裹所有由span标签包裹后的文字
- 将上述区域隐藏 ， 如设置visibility : hidden
- 分别获取到上述区域中的span节点，获取它们的位置信息并进行存储
- 新增一块区域，根据所获取到的信息来渲染各个文字，并且也是由span 标签包裹
*这样是可以实现此需求，途中还遇到一个坑爹的问题；
由于项目是设计类的，可一随意拖动文字区域大小，更改文字属性信息，导致在相同文字下某一个宽度值和 font-size值时会导致，原本文本不会换行，但是我们变换后的区域会换行。
排查思路：
- 对比样式属性，无果
- 发现在文本区域宽度为某个奇数并且带有小数时会发生问题
- 判断是否是因为浏览器不会渲染.5px类似的原因
- 最终定位到原因 ： 字体大小为小数 -> 乘以文字个数后会出现 总宽度不等于文本域宽度的情况（小数问题导致）
- 最终选择给新增加的包裹文本没个都设置一个宽度来解决