实现文字字数不等对其

Posted 2020-08-20 半夏微澜ぺ

 ：空格   占据宽度受字体的影响

 透明；占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

 透明；占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

中文字符：

中文都是等宽的，因此可以使用  和  实现两个 三个  四个字符的对齐（还可以使用&#x3000：据的宽度正好是1个中文宽度，而且基本上不受字体影响）

 

当中文和英文混杂的时候，使用 ,  等空格实现冒号的完美对齐还是有些困难的，除非英文使用的是等宽字体，于是乎，我们就可以使用普通的 空格做英文字符的宽度调节。

英文字符和一些非文字的符号一般都是非等宽的，有时候为了美观让它们等宽，可以使用等宽字体，（在网上下载常用的等宽字体）

 

在web页面上，一般有3种书写：

1. html中字符输出使用&#x配上charCode值；
2. 在javascript文件中为防止乱码转义，则是\u配上charCode值；
3. 而在CSS文件中，如CSS伪元素的content属性，直接使用\配上charCode值。
4. unicode-range是U+配上charCode值。

unicode编码转换：http://tool.chinaz.com/tools/unicode.aspx

 

demo：想在HTML/JS/CSS中转义“我”这个汉字，分别是：

1. 我
2. \u6211, 如console.log(‘\u6211‘);
3. \6211, 如.xxx:before { content: ‘\6211‘; }

考虑到直接　这种形式暴露在HTML中，可能会让屏幕阅读器等辅助设备读取，从而影响正常阅读流，因此，我们可以进一步优化下，使用标签，利用伪元素，例如：

.half:before { content: ‘\2002‘; speak: none; }
.full:before { content: ‘\2003‘; speak: none; }