字符以及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. [luoguP2577] [ZJOI2005]午餐(DP)

    传送门 显然吃饭时间越长的人排在前面越好,所以先排序. f[i][j]表示前i个人,A队的打饭时间为j的最优解,每个人只有两种选择,去A队或是去B队. #include <cstdio> ...

  2. 2016 Multi-University Training Contest 9 solutions BY 金策工业综合大学

    A Poor King Tag: Reversed BFS Preprocessing is needed to calculate answers for all positions (states ...

  3. putty 配置

    http://blog.sanctum.geek.nz/putty-configuration/ PuTTY configuration Posted on December 22, 2012 PuT ...

  4. 从零开始写STL—模板元编程之any

    any class any; (since C++17) The class any describes a type-safe container for single values of any ...

  5. Unique Binary Search Trees(dp)

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  6. 寒武纪camp Day4

    补题进度:7/11 A(博弈论) 略 B 待填坑 C(贪心) 题意: 一个序列是good的当且仅当相邻两个数字不相同.给出一个长度为n的数列,每个数字是ai.定义一种操作就是把a中某个元素拿到首位去, ...

  7. ArrayList和LinkedList区别(蚂蚁金服面试题)

    1. 是否保证线程安全: ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全: 2. 底层数据结构: Arraylist 底层使用的是Object数组:LinkedLis ...

  8. 前后端分离项目shiro的未登录和权限不足

    在前后端分离的项目中.前端代码和后端代码几乎不在同一个目录下,甚至不是在一台服务器上:我这个项目部署在linux.同一台服务器,不同目录下:所有的页面跳转由前台路由,后台只是提供返回的数据: 干货↓  ...

  9. Android远程服务

    一.远程服务主要代码 1.IService.aidl package com.shz.remoteservice; interface IService { String getTicketInfoB ...

  10. Working with Validators and Messages in AngularJS

    原文:http://odetocode.com/blogs/scott/archive/2014/10/16/working-with-validators-and-messages-in-angul ...