使用CSS代码的空格实现中文对齐的方法

2020-05-06 09:15:16易采站长站整理

稍等,你刚说了工具,什么工具!?

哈,这位同学好敏锐,我是有一个私藏的小工具,可以把任意字符转换成HTML识别格式,若有兴趣,您可以狠狠地点击这里:任意字符转换成HTML识别格式工具页面
201568154818388.png (420×236)

使用了这个工具,你会发现 ,  原来是相邻兄弟关系:

      →  
      →  

更多内容

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

再科普点关于字符的实用知识吧:
1. HTML中字符输出使用&#x配上charCode值;
2. 在JavaScript文件中为防止乱码转义,则是u配上charCode值;
3. 而在CSS文件中,如CSS伪元素的content属性,直接使用配上charCode值。

因此,想在HTML/JS/CSS中转义“我”这个汉字,分别是:

    我
    u6211, 如console.log(‘u6211’);
    6211, 如.xxx:before { content: ‘6211’; }

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

CSS Code复制内容到剪贴板

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

这样,占位的空格字符即不能读,也不能选了。