字符以及HTML实体 描述以及说明
 

 

这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏,在两端对齐布局中又是不可少的元素。是个让人又爱又恨的小东东。

 

该空格学名不详。为了便于记忆,我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性:透明滴!此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

 

该空格学名不详。为了便于记忆,我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性:透明滴!此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

 

该空格学名不详。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。我目前是没用过这个东西,这里亮出来是让其过一下群众演员的瘾。

中文字体都是等宽的,一个全角空格的宽度就是一个普通中文的宽度。所以,上面的demo中 空格换成全角空格也是可以滴!

但是,我们不能直接在页面中打全角空格,因为在大多数编辑器中空格是透明滴,很容易就被删掉;另外,HTML压缩时候,空格很可能被干掉!咋办?需要转换书写形式。

在web页面上,一般有3种书写:

  1. 直接,例如搜狗输入法输入“版权” – ©.
  2. web字符,©
  3. 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 表示空格 实现中文对齐的更多相关文章

  1. 小tips: 使用&#x3000;等空格实现最小成本中文对齐

    一.重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽.见下表: 字符以及HTML实体 描述以及说 ...

  2. [转] 小tips: 使用&#x3000;等空格实现最小成本中文对齐 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4562 一.重见天日第 ...

  3. HTML空格符号 nbsp; ensp; emsp; 介绍以及实现中文对齐的方法

    一:不同空格符合的区别   半角的不断行的空白格(推荐使用)    半角的空格    全角的空格 详细的含义:  :这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格 ...

  4. python查找空格和中文

    前言 图片或者文件夹下,命名不规范,有中文或者有空格.这个脚本批处理查找,并输出到 txt中方便修改,也可以扩展为 直接脚本删除空格等.目前只用在Windows上,mac没有测试,不知道能不能行,有需 ...

  5. quartusii开发过程中路径不能出现空格或中文

    quartusii开发过程中路径不能出现空格或中文,否则软件出现.stf文件错误提示,开发环境搭建的时候也不能出现空格和中文,否则也会报错.

  6. python str.format 中文对齐的细节问题

    写了一个练手的爬虫...在输出的时候出现了让人很不愉♂悦的问题 像这样: 令人十分难受啊! #----------------------------------------------------- ...

  7. java 读取文件路径空格和中文的处理

    应用部署时,发生文件读取错误,发现是部署路径中含有空格的文件夹名,然后把应用服务器位置迁移了. 从网上找到如下方案:1, TestURL().class.getResource("" ...

  8. php 去除所有空格 包括中文空格圆角空格

    有的中文的半角,圆角空格或者段落符显示为空白的.可以用正则来处理 preg_replace("/(\s|\&nbsp\;| |\xc2\xa0)/","" ...

  9. LODOP带空格和不带空格的字体对齐

    有时候需要用到字体上下对齐,有些需要的文字较多,较少的文字需要加部分空格才能向上面的文字对齐.本文实际测试了一下字体对齐需要的空格.代码是在editplus里写的,该编辑软件里的字体首选项设置的是Co ...

随机推荐

  1. E题

    题目大意: 找到一个最小的l值,使得a到b-l+1中任取一个数开始前进l次,中间包含至少有k个素数,如果找不到,返回-1: 运用素数打表法和2分法便能简单搞定: 题目链接:http://codefor ...

  2. 字符串匹配(codevs 1404)

    题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度.给定K个询问,对于每个询问给定一个x,求出匹配长度恰为x的位置有多少个.N,M,K<=20000 ...

  3. BZOJ1733: [Usaco2005 feb]Secret Milking Machine 神秘的挤奶机

    n<=200个点m<=40000条边无向图,求   t次走不经过同条边的路径从1到n的经过的边的最大值   的最小值. 最大值最小--二分,t次不重边路径--边权1的最大流. #inclu ...

  4. hihoCoder #1014 : Trie树 [ Trie ]

    传送门 #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互 ...

  5. 转 蓝桥杯 历届试题 大臣的旅费 [ dfs 树的直径 ]

    题解: 求树的直径. 转一篇博客:http://www.cnblogs.com/hanyulcf/archive/2010/10/23/tree_radius.html 树的直径是指树的最长简单路.求 ...

  6. python学习之-- logging模块

    logging模块功能:提供了标准的日志接口,可以通过它存储各种格式的日志.日志5个级别分:debug(),info(),warning(),error(),critical() logging.ba ...

  7. ACM-ICPC 2018 沈阳赛区网络预赛 G 容斥原理

    https://nanti.jisuanke.com/t/31448 解析 易得an=n*n+n O(1)得到前n项和  再删除与m不互素的数  我们用欧拉函数求出m的质因数  枚举其集合的子集 进行 ...

  8. T1992 聚会 codevs

    http://codevs.cn/problem/1992/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 小S 想要从某地 ...

  9. Topcoder 658Div2

    补题风向标——>> 假装题意知道 A:暴力合成一遍了 n=s.size(); m=t.size(); ss+=s; tt+=t; if (ss==tt) or not; B:题意是给定 1 ...

  10. Python导入模块的几种姿势

    中文翻译:http://codingpy.com/article/python-import-101/ 英文原文:http://www.blog.pythonlibrary.org/2016/03/0 ...