charCode 表示空格 实现中文对齐
| 字符以及HTML实体 | 描述以及说明 |
|---|---|
|
|
这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏,在两端对齐布局中又是不可少的元素。是个让人又爱又恨的小东东。 |
|
  |
该空格学名不详。为了便于记忆,我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性:透明滴!此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。 |
|
  |
该空格学名不详。为了便于记忆,我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性:透明滴!此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。 |
|
  |
该空格学名不详。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。我目前是没用过这个东西,这里亮出来是让其过一下群众演员的瘾。 |
中文字体都是等宽的,一个全角空格的宽度就是一个普通中文的宽度。所以,上面的demo中 空格换成全角空格也是可以滴!
但是,我们不能直接在页面中打全角空格,因为在大多数编辑器中空格是透明滴,很容易就被删掉;另外,HTML压缩时候,空格很可能被干掉!咋办?需要转换书写形式。
在web页面上,一般有3种书写:
- 直接,例如搜狗输入法输入“版权” –
©. - web字符,
© - charCode表示:
©
而上面的 ,  就是具有特定名称的web字符。但是,恕我寡闻,我并不清楚全角空格是否有对应& + 关键字示意,所以,就使用工具转成了charCode字符表示,也就是这里的
考虑到直接 这种形式暴露在HTML中,可能会让屏幕阅读器等辅助设备读取,从而影响正常阅读流,因此,我们可以进一步优化下,使用标签,利用伪元素
demo:
css
.half {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');
}
.full {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');
}
.half:before { content: '\2002'; speak: none; }
.full:before { content: '\2003'; speak: none; }
HTML代码:
<ul>
<li class="li">姓<span class="full"></span><span class="full"></span>名:<input type="text" /></li>
<li class="li">手<span class="half"></span>机<span class="half"></span>号:<input type="text" /></li>
<li class="li">电子邮箱:<input type="text" /></li>
</ul>
效果图:

摘自:http://www.zhangxinxu.com/wordpress/2015/01/tips-blank-character-chinese-align/
charCode 表示空格 实现中文对齐的更多相关文章
- 小tips: 使用 等空格实现最小成本中文对齐
一.重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽.见下表: 字符以及HTML实体 描述以及说 ...
- [转] 小tips: 使用 等空格实现最小成本中文对齐 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4562 一.重见天日第 ...
- HTML空格符号 nbsp; ensp; emsp; 介绍以及实现中文对齐的方法
一:不同空格符合的区别 半角的不断行的空白格(推荐使用) 半角的空格 全角的空格 详细的含义: :这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格 ...
- python查找空格和中文
前言 图片或者文件夹下,命名不规范,有中文或者有空格.这个脚本批处理查找,并输出到 txt中方便修改,也可以扩展为 直接脚本删除空格等.目前只用在Windows上,mac没有测试,不知道能不能行,有需 ...
- quartusii开发过程中路径不能出现空格或中文
quartusii开发过程中路径不能出现空格或中文,否则软件出现.stf文件错误提示,开发环境搭建的时候也不能出现空格和中文,否则也会报错.
- python str.format 中文对齐的细节问题
写了一个练手的爬虫...在输出的时候出现了让人很不愉♂悦的问题 像这样: 令人十分难受啊! #----------------------------------------------------- ...
- java 读取文件路径空格和中文的处理
应用部署时,发生文件读取错误,发现是部署路径中含有空格的文件夹名,然后把应用服务器位置迁移了. 从网上找到如下方案:1, TestURL().class.getResource("" ...
- php 去除所有空格 包括中文空格圆角空格
有的中文的半角,圆角空格或者段落符显示为空白的.可以用正则来处理 preg_replace("/(\s|\ \;| |\xc2\xa0)/","" ...
- LODOP带空格和不带空格的字体对齐
有时候需要用到字体上下对齐,有些需要的文字较多,较少的文字需要加部分空格才能向上面的文字对齐.本文实际测试了一下字体对齐需要的空格.代码是在editplus里写的,该编辑软件里的字体首选项设置的是Co ...
随机推荐
- BZOJ4551 - [TJOI2016]树
Portal Description 给出一棵\(n(n\leq10^5)\)个点的以\(1\)为根的有根树,进行\(Q(Q\leq10^5)\)次操作: 标记一个点\(x\). 询问\(x\)的祖先 ...
- X230 安装 EI Capitan 10.11.5 驱动篇
/* 键盘又换回了 美蓓亚键盘 缩写nmb 虽然比群光软 但是手感真的出色,貌似x宝没有这个代工厂的键盘(全新,非拆机,而且是标准us阵列,背光版) 有人肯定会问,博主这么纠结键盘干嘛? ...
- [Usaco2006 Nov] Fence Repair 切割木板
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1356 Solved: 714[Submit][Status][Discuss] Description ...
- openstack DVR的AIO 问题
问题描述 : 创建public 网络,创建路由器,并且把路由器的gateway 设置指向网络后有下面几种错误 路由器对应的linux network namespace 建立起来了,但是里面并没有对应 ...
- VB程序逆向反汇编常见的函数(修改版)
VB程序逆向常用的函数 1) 数据类型转换: a) __vbaI2Str 将一个字符串转为8 位(1个字节)的数值形式(范围在 0 至 255 之间) 或2 个字节的数值形式(范围在 -32,7 ...
- mysql查看所有存储过程,函数,视图,触发器,表,分页
查询数据库中的存储过程和函数 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE' ...
- UICollectionView 具体解说学习
UICollectionView 和UITableView非常像,是APPLE公司在iOS 6后推出的用于处理图片这类UITableView 布局困难的控件,和UITableView 一样,它也有自己 ...
- sdut 面向对象程序设计上机练习四(变量引用)
面向对象程序设计上机练习四(变量引用) Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 将变量的引用作为函数形參,实现2个int型数据交换. 输入 输入2 ...
- asp.net mvc3的静态化实现
静态化处理,可以大大提高客户的访问浏览速度,提高用户体验,同时也降低了服务器本身的压力.在asp.net mvc3中,可以相对容易地处理静态化问题,不用过多考虑静态网页的同步,生成等等问题.我提供这个 ...
- 我们工作到底为了什么 (HP大中华区总裁孙振耀退休感言)
我们工作到底为了什么 (HP大中华区总裁孙振耀退休感言) 一.关于工作与生活 我有个有趣的观察,外企公司多的是25-35岁的白领,40岁以上的员工很少,二三十岁的外企员工是意气风发的,但外企公司 ...