前端技巧给网页中英文之间自动加上空格的方法

给网页中英文之间自动加上空格的方法

很多网站为了文章更易阅读,在中英文一起出现或出现数字的时候,都会习惯给英文或数字前后加上空格,这是一个较好的习惯,但如果网站上文章较多,而以前没有该习惯的话,想修改就不容易了,CSS里目前也没有一个选择器可以单独选择英文或数字,要不然通过CSS给英文和数字前后增加边距就行了,不过目前有通过js和css组合的方式来实现该效果:

首先引入JQuery库:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

然后引入text-autospace.js文件(点这里下载):

<script src="text-autospace.js"></script>

给网页html标签增加一个名为“han-la”的class:

<html class="han-la">

在网站CSS样式表中加入下面的样式定义:

html.han-la hanla:after {
 content: " ";
 display: inline;
 font-family: Arial;
 font-size: 0.8em;
}
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;
}

这样以来,网页上出现中英文混排的时候,便自动加上空格了,由于是通过CSS样式增加的空格,所以如果复制这段文字的话,本身是没有空格的,例如下面的示例:

<!DOCTYPE html>
<html class="han-la">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
html.han-la hanla:after {
 content: " ";
 display: inline;
 font-family: Arial;
 font-size: 0.8em;
}
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;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="text-autospace.js"></script>
</head>
<body>
<div id="all">
<p>美国简称USA,总面积963万平方公里,主要语言是English...</p>
</div>
</body>
</html>

如果未使用该插件,示例的效果是这样的:

中英文之间未空格.png

使用了该插件后,示例的效果如下,在英文和数字的两边增加了空格:

中英文之间空格.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.jzdi.com.cn/skill/121.html