单行文字两端对齐

作者：梁海
链接：http://www.zhihu.com/question/19895400/answer/13377100
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

NBSP（U+00A0，Unicode 叫它「NO-BREAK SPACE」，HTML 里可用「 」表示）是常规空格（U+0020，就是最常用的西文、半角空格）的一个变体。NBSP 和常规空格的区别包括：它不允许断行（所谓「NO-BREAK」）；另外因为它不常规，所以它一般不会被当作普通空格合并。
NBSP 本来应该用在文本中需要避免断行的地方，比如数值的数字和单位之间（比如「100 km」不应该在中间换行）。但由于种种原因它被滥用了，人们不希望空格合并的时候就用它。这是一种已经成为事实标准的肮脏做法……不过 Unicode 里确实也没有别的更合适的空格字符可以这么用了。
当 NBSP 被用来控制字符的位置，问题就更大了。因为 NBSP 和常规空格对字体来说是几乎一样的，所以字体渲染时常规空格该有多大 NBSP 就会显示为多大，所以在不同的字体渲染情况下可能会有意料之外的效果（主要是不同字体的空格与 em（即字号）之比不一样）。尤其用 NBSP 来控制中文字符位置的时候，因为 NBSP 和中文字符所占宽度（1 em）之比在不同字体中不一样，所以实在太傻了。

<div class="row com_row">
    <div class="col col-50 clearfix"><p class="fl" style="letter-spacing: 2em;">姓名</p><em class="fl" style="margin-left: -2em;">：</em></div>
    <div class="col col-50 ta_r">我是路人甲</div>
</div>

 

<div class="row com_row">
    <div class="col col-50 clearfix"><p style="letter-spacing: .07em; float: left;">优 惠 券</p><em class="fl">：</em></div>
    <div class="col col-50 ta_r">-200元</div>
</div>
<div class="row line_row"><div class="col col-100"><p></p></div></div>

 

 

 

 

 

 

 

 

 

 

 

white-space: pre 这个值「prevents user agents from collapsing sequences of white space」[1]，它相当于让普通空格实现了一些人们常常用 NBSP 实现的事情。受这条 CSS 属性控制的普通空格当然也会受字体渲染的影响——在和字体的关系方面，普通空格和 NBSP 没什么区别。

之前问题补充说明中提到的情况，应该有这两种方案可以考虑：

• 全角空格（U+3000）
  这应该是最直截了当的方案，问题只在于污染了文本（多了字符）。全角空格的宽度永远等于 1 em。
• letter-spacing: 2em
  这应该是最干净的方案，最符合这个情况的本质。

另外，有人提到了「text-align: justify」，这个不太好用。因为，据我所知，CSS3 之前它在 IE 之外的许多浏览器里不会对中文字符有效果（CSS3 里明确定义了这个值对 CJK 字符的效用，所以最新的浏览器开始支持了），除非你在两个字中间加上一个普通空格（但这样还不如用全角空格那么干净），而且还得建立一个宽度固定的 box。

我想，这个问题中最关键的一点在于众所周知的「内容和格式分离」，这也是 CSS 为 HTML 以及互联网带来的最大变革。 这是前端工程师们必须理解的——支不支持就是另一回事了。
我们应该明白：

• 常规空格是内容。它的地位类似与任何英文字母和标点的字符，但又的确有些特殊的性质。
• NBSP 是内容，它是一种特殊的空格。如今它被滥用来控制格式，用内容来控制格式实在很脏。
• white-space: pre 当然是格式，但它在这种情况下要达到许多人期望的效果则一样是依赖很脏的内容——多个用来控制格式的空格。
• 全角空格也是内容。但为什么用它来控制汉字位置就更能接受一些呢？因为中文向来有用和汉字一样宽的空格控制格式的习惯，比如学校里教导的「写作文时每段开头空两格」，而且全角空格和汉字等宽，能完美控制汉字的位置问题。
• letter-spacing: 2em 是格式，它是用为西文字体排印准备的技术来控制中文字符的间距。