背景
产品反馈了一个界面优化建议
添加图片注释，不超过 140 字（可选）
问题描述：英文单词被截断换行（上图的school）
期待表现：保留完整单词，遇到空格才换行
排查过程
- 首先想到的是，文本换行问题 ?
浏览器默认换行行为：英文遇空格换行（默认就是预期的表现）
然而审查元素并未发现任何换行css代码（work-break等）改变了默认行为
添加图片注释，不超过 140 字（可选）
到底是什么原因导致的，这个问题以前不是不会吗?
- 兼容性问题？
好吧~，几台测试机都会
- 小程序 text 组件近期更新过版本导致？
遇事不决先甩锅微信
添加 decode不行，在社区查找问答未果
既然以前不会，以前的绘本跟这本有区别吗？
- 最终定位：空格问题！！
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
看请求，后端返回的数据都是正常的空格‘ ’，但是渲染出来，却是  ；为什么会这样？？
尝试手动把 ；改成‘ ’ ，问题解决！ 最终定位到了原因： ；和 ‘ ’ 不一样！
如何解决
一是不确定配置绘本的时候，如何输入空格，才会一个显示正常的空格，一个显示 ；呢？二也没办法要求用户严格按照一定格式输入
那就自己替换空格符
添加图片注释，不超过 140 字（可选）
与 ‘ ’的区别
这两个都表示空格，他们是一个东西吗？
var nbspStr = document.getElementById('space1').innerText;
var str = " ";
console.log(str == nbspStr); // false
由此可判断， ； ≠ ’ ’
什么是 ；？
添加图片注释，不超过 140 字（可选）
 ；是不换行空格
因此，当两个单词使用 连接时，这两个单词就不会被分隔为2行
添加图片注释，不超过 140 字（可选）
应用场景举例：姓和名，100元 这些不应该换行
在html中的区别
普通空格符 不管输入几个，html渲染只有一个
 ；输入几个，html就渲染几个
添加图片注释，不超过 140 字（可选）
Unicode码区别
经浏览器解析后 ‘ ’ 的Unicode码为 32， 的Unicode码为 160
var nbspStr = document.getElementById('space1').innerText;
var str = " ";
console.log(str.codePointAt() ); // 32
console.log(nbspStr.codePointAt() ); // 160
拓展
计算机中的所有字符，都是用二进制的0、1的排列组合来表示的，因此就需要有一个规范，来枚举规定每个字符对应哪个0、1的排列组合，这样的规范就是字符集。
添加图片注释，不超过 140 字（可选）
