自动在网页中英文之间加空格
#编程技术 2019-10-30 11:17:31 | 全文 950 字，阅读约需 2 分钟 | 加载中... 次浏览👋 相关阅读
- js限制button十秒内不能重复点击
- 让网站速度更更上一层楼,使用instantclick预加载
- 41个Web开发者都收藏的实用代码
- Darkmode.Js – 一键为网站添加黑暗模式
- JavaScript + imgur API 上传图片
汉学家称这个空白字元为「盘古之白」，因为它劈开了全形字和半角字之间的混沌。另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在34岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。
虽然不知道这是不是真的，不过在中英混排时加上空格的话看起来确实要舒服不少，知乎（https://www.zhihu.com/question/19587406）上关于这个问题的讨论也不少。
不过作为强迫症，在中英文之间加上空格还是很有必要的，但是自己写文章时还可以这么做（如果你愿意一个一个加的话），在浏览网页时可就没办法了。并且就算是自己在写博客时也不会考虑那么多吧！
于是乎，万能的GitHub找到了这个：http://github.com/vinta/pangu.js
其实这是一个不错的解决方案，不仅可以自己在网站中插入脚本来达到加空格的效果，还可以使用Chrome插件使得访问所有网站都会自动加上空格。
虽然看起来确实不错，但是还是有缺点的。自动加上的空格会被选中，使得复制时也会被带上。虽然看上去没有什么问题，可是如果是在网站URL中加上了空格反而会造成麻烦。如果是在代码中加上了空格，还可能会造成一定的后果。
所以还是另找办法吧
然后发现了这个：http://github.com/mastermay/text-autospace.js
空格不会被自动选中，并且已手动添加了空格的不会再次添加。
下面是演示（可按Ctrl+A查看效果）： 不含空格的：究竟在Win10下Chrome浏览器和Edge浏览器哪个快呢？ 包含空格的：究竟在 Win10 下 Chrome 浏览器和 Edge 浏览器哪个快呢？
为了防止自己忘记还是把使用方法贴一份吧： （这里以Typecho作示范，其他类型的网站照猫画虎就行了）
1、先上传js，然后在博客主题header.php或footer.php中引入：
<script src = "<?php $this->options->themeUrl('js/text-autospace.min.js'); ?>"></script>
2、添加以下css，可以在主题css中修改或另行引入：
html.han-la hanla:after {
content: " ";
display: inline;
font-family: Arial;
font-size: 0.89em;
}
html.han-la code hanla,
html.han-la pre hanla,
html.han-la kbd hanla,
html.han-la samp hanla {
display: none;
}
html.han-la ol > hanla,
html.han-la ul > hanla {
display: none;
}
3、最后修改标签，添加class=“han-la”：
<html lang="zh-CN" class="han-la">
这时候刷新一下网页，你会发现中英文之间被自动加上空格了。
via:https://beyang.cc/experience/text-autospace.html