实现单行文字两端对齐时

实现单行文字两端对齐时，使用   当作空格和使用 white-space: pre 的原生空格有什么区别？哪个更好一些？

最近有一个项目页面中制作的时候，UI 大致是这样的（这是一个发表评论的页面）： 
优 点：XXXXX 
缺 点：XXXX 
使用心得：XXXX 
为了保证对齐，所以我在写 HTML 的时候，在“优”和“点”之间用了4个 &nbsp 当空格。但是 leader 在检验的时候说这里不能用 &nbsp，要用空格，然后在 CSS 里面加 white-space:pre。 
因为为了保证项目进度（事实上我们最近很缺人~），我也没有太多的时间去和 leader 讨论这个，就按照他说的进行了修改。 
但是我还是很想弄清楚这样有什么不好的，因为我记得刚刚开始学 XHTML 的时候，里面貌似有规定空格和大于小于什么的都需要转义，所以空格一般都是用 &nbsp。
虽然只是小问题，但是还是想请教一下，非常感谢……

7 个答案

46

贺师俊，Web开发者

46 票，来自  大猫、超柏何、顾轶灵 更多

首先提问者并没有把他的意图描述清楚。如果意图都未描述清楚，自然就难以进行“哪种更好一些”的比较，因为比较的基准就不存在。而描述原始意图的补充说明现在已经被删掉了，得查看日志才看得到。这里我照录一下： 

^{最近有一个项目页面中制作的时候，ui大致是这样的（这是一个发表评论的页面）： 
优 点：XXXXX 
缺 点：XXXX 
使用心得：XXXX 
为了保证对齐，所以我在写html的时候，在“优”和“点”之间用了4个&nbsp当空格。但是leader在检验的时候说这里不能用&nbsp，要用空格，然后在css里面加white-space:pre。然后说现在基本没有网站用&nbsp当空格了。  
因为为了保证项目进度（事实上我们最近很缺人~），我也没有太多的去和leader讨论这个，就按照他说的进行了修改。 
但是我还是很想弄清楚这样有什么不好的……因为我记得刚刚开始学xhtml的时候，里面貌似有规定空格和大于小于什么的都需要转义，所以空格一般都是用&nbsp 
虽然只是小问题，但是还是想请教一下，非常感谢…… 
另外，这种情况下，大家做页面会用空格吗？因为我目前没有发现有什么css属性可以比较好的控制文字的两边对齐显示……}

可见提问者的意图是文字排版对齐。 理论上说，所有排版样式需求都应该以CSS达成。所以无论是用NBSP还是一般SP+white-space:pre 都是不正确的。原理@梁海已经说过了，不重复。 

正确的做法是@米粽 说的text-align:justify。但是还需要加上CSS3草案的text-justify:distribute 。 

“正确的做法”存在的问题是： 除了IE之外，尚无浏览器实现text-justify:distribute。且IE必须还加上text-align-last:justify。 

是的，尽管IE常为我们所不齿，但是在文字排版和国际化方面，IE是做的最好的。仅就两端分布对齐这个特例而言，IE领先了其他浏览器10年以上。 

@梁海 提到的CJK的justify问题也确实存在。直到最近WebKit引擎才实现CJK的text-align:justify（即相当于text-justify:inter-ideograph）。不过即使很早就已经实现CJK两端对齐的Gecko，由于没有实现text-align-last，所以无法实现最后一行或单行的两端分布对齐。而本例的本质恰好是单行的两端分布对齐。 

@梁海 和其他人提到的workaround包括：全角空格和letter-spacing。从效果上说是可行的。但是 letter-spacing是一个糟糕的方案，因为你必须手动计算letter-spacing，而且对于字数不同的label，letter-spacing也是不同的。这就造成了内容和格式的强耦合，完全违背了内容与样式分离的要求。这很好理解，因为letter-spacing并没有表达出真正的设计意图（两端分布对齐）。这是我在博客、论坛、问答等中始终强调的，CSS是一门针对排版和设计的DSL，其可维护性来自于准确的表达设计意图。 

下面说一下我个人推荐的解决方案： 

一、实用主义方案：使用全角空格。解说如下： 

全角空格从某种程度上说可以是一种workaround。但是这个世界上并没有绝对的事情。比如，对于作品名，有<cite>标签，但是有多少中文前端开发者使用？几乎没有。这是因为在西方，书名要用斜体，因此通过<cite>标签附加上样式是顺理成章的。但是在中文里习惯用书名号，而不是斜体，所以尽管<cite>可以提供额外的语义，但是也没有人去用。我们可以思考一个问题：书名号是内容呢还是样式呢？ 

在轻率的给出答案之前，可以再思考一下<q>的例子。应该用引号，还是应该用<q>标签？这个问题倒是中西共通的。 

经过仔细思考，我想大家会发现，结构和语义细化到何种程度实际上是有弹性的。固然用<q>标签提供了更精细的语义，但是在许多场合未必有用。回到书名号的例子，从一般感觉来说，标点符号会被作为内容，但是如果考虑到书名号在横排时用《》，而在竖排时用浪线，就会发现书名号也有作为样式的一面。 

就提问者的用例而言，恰好也是一个方块字排版才会出现的样式需求。（阿拉伯文、泰文等或许也会有类似的需求，这超出我的知识范围，请懂这些文字排版的同志补充了。）在西文里是没有这样的样式的。而在传统中文排版中，如@梁海 所说，恰恰就是以空格来控制的。因此我们可以将全角空格理解为类似标点符号的作用。这样我们就不用为没有用CSS达成效果而耿耿于怀了。 

二、理想主义方案： 

label { 
  text-align: justify;  

  text-align: end; /* 对于除了IE之外的浏览器用尾对齐覆盖之前的两端对齐方式 */ 

  text-align-last: justify; 
  text-justify: distribute; 
} 

这里的理念是： 

不同浏览器的表现不一样是可接受的。 

在IE和将来正确实现CSS3-text模块的浏览器中将两端分布对齐。【注：因为手头没有IE9和IE10无法测试，有可能需要增加额外的hack。】 

在当前除IE以外的主流浏览器中将右对齐。这是一种常见的label对齐设计，这里假设以此作为fallback是能为设计师所接受的。 

以上。