WordPress 在中英文间自动加入空格

2016.09.07 | | 31 Comments

其实一直都是人肉输入空格的,前阵子看到『基吧』折腾这个自动加入空格,提到几个方法,感觉 引入 js 的那个方法 不错,折腾了一下,没成功,当时就丢一边去了。今天有空,又折腾了下,才发现那个 js 代码并不完整,换上完整版效果就出来了。

功能正常的中英文间自动加入空格代码:https://github.com/mastermay/text-autospace.js,或者本地下载:点击下载,引入其中一个即可,方法就不详细说了,老司机肯定都会,小白请自行度娘。

接着,在 <html> 标签中添加 class="han-la"(一般在 header.php 文件中);然后,在 style.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;
}

至此,如无意外,多刷新几次效果就出来了。


演示(可使用CTRL+A查看区别)

不含空格的段落

Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中。目前,包括Rubinius和Merb在内的很多知名项目都使用了Git。Git同样可以被诸如Capistrano和Vlad the Deployer这样的部署工具所使用。GitHub于2008年2月运行。

已手动添加了空格的段落

Git 是一个分布式的版本控制系统,最初由 Linus Torvalds 编写,用作 Linux 内核代码的管理。在推出后,Git 在其它项目中也取得了很大成功,尤其是在 Ruby 社区中。目前,包括 Rubinius 和 Merb 在内的很多知名项目都使用了 Git。Git 同样可以被诸如 Capistrano 和 Vlad the Deployer 这样的部署工具所使用。GitHub 于 2008 年 2 月运行。

福利:

漢字標準格式 — 印刷品般的漢字排版框架(内容很不错)

支付宝扫码打赏微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏老杨

声明: 除非注明,常阳时光文章均为原创,转载请以链接形式标明本文地址
本文地址:https://cyhour.com/422/

Comments:31

  1. Klose24 Google Chrome 53.0.2785.89 Windows 10 x64 Edition

    这个帅,一种都没注意到文字排版,看来大家的博客都走高大上路线了哇.
    有时间折腾下

    2016.09.08 01:31 # 回复
    1楼
  2. 郑永120 Firefox 45.0 Ubuntu x64

    居然真的按了ctrl+a了,还有这区别。。汗。

    2016.09.08 03:42 # 回复
    2楼
  3. 最后推荐的那个看着不错。

    2016.09.08 09:19 # 回复
    3楼
  4. fooleap117 Google Chrome 53.0.2785.30 Windows 7 x64 Edition

    我觉得还是自己写的时候注意加上空格就是,在网站上用 JS 实现没太必要,当然强迫症除外哈哈,Chrome 有扩展——空格之神。

    2016.09.08 09:28 # 回复
    4楼
    • 老杨2.16k+ Firefox 48.0 Windows XP

      @fooleap 我一般是写的时候加上去了,养成习惯就会有强迫症了,哈哈。扩展啥的一般是独乐乐。

      2016.09.08 10:02 # 回复
  5. 神父33 Google Chrome 53.0.2785.89 Windows 10 x64 Edition

    不愧是折腾之神

    2016.09.08 11:02 # 回复
    5楼
  6. Coney5 Google Chrome 53.0.2785.89 Windows 7 x64 Edition

    每次手动输入空格是有点麻烦,有空按你的方法折腾一下。

    2016.09.08 16:40 # 回复
    6楼
    • 老杨2.16k+ Firefox 48.0 Windows XP

      @Coney 反正我是已经习惯了手动输入空格了,这个只是辅助。

      2016.09.08 18:29 # 回复
  7. kn00759 Google Chrome 52.0.2743.116 Windows 10 x64 Edition

    我一般手动空格。

    2016.09.08 18:27 # 回复
    7楼
    • 老杨2.16k+ Firefox 48.0 Windows XP

      @kn007 手动空格+1,不过现在加上自动辅助了。

      2016.09.08 19:00 # 回复
  8. 在小众软件里为空格也曾经吵过,不过还是看个人习惯吧。我在中英文间是不加空格的。

    2016.09.08 18:41 # 回复
    8楼
    • 老杨2.16k+ Firefox 48.0 Windows 10 x64 Edition

      @Unee Wang 嗯,萝卜青菜各有所爱……排版是其次,内容才是王道。我以前也是不加空格的,现在慢慢喜欢上了,也就习惯了,还有一些单词的大小写也是。

      2016.09.08 22:26 # 回复
  9. 瑾瑜28 Microsoft Edge 14.14393 Windows 10 x64 Edition

    之前也看过这个汉字排版标准……赞所有重视的人

    2016.09.08 20:24 # 回复
    9楼
    • 老杨2.16k+ Firefox 48.0 Windows XP

      @瑾瑜 那个标准不容易做到……排版好,看起来很舒服。

      2016.09.09 18:32 # 回复
  10. synyan48 Google Chrome 48.0.2564.103 Mac OS X  10.11.6

    还不错。不过就算不空格也不难看。

    2016.09.09 13:35 # 回复
    10楼
  11. nyun9 Firefox 48.0 Mac OS X  10.11

    这个中英也是最近刚刚知道,确实值得提倡!

    2016.09.10 18:00 # 回复
    11楼
  12. 遇到同好了,我一直是人工加的空格。是时候试试你的代码了。

    2016.09.13 18:11 # 回复
    12楼
  13. Saintw2 Google Chrome 50.0.2661.75 Mac OS X  10.12.0

    咦,我所用的 Pangu.js 也是这个效果,不过我是有手动加空格的习惯了…

    2016.09.16 01:12 # 回复
    13楼
    • 老杨2.16k+ Firefox 48.0 Windows XP

      @Saintw 条条大道通罗马,我现在其实也习惯了手动加空格。

      2016.09.21 10:34 # 回复
  14. 这个不错,排版方便。

    2016.09.20 13:35 # 回复
    14楼
  15. 这个不错,收藏备用~~

    2016.09.27 23:40 # 回复
    15楼
    • 老杨2.16k+ Firefox 49.0 Windows XP

      @牧羊人 一般收藏的都是不准备用的吧?哈哈

      2016.09.28 09:43 # 回复
      • @老杨 哈哈哈,差不多是的,因为我习惯手动控制空格,有些地方不需要空格

        2016.09.28 10:01 # 回复

发表留言