3622人阅读
web前端（41）
&&在ie、firefox、chrome浏览器上显示的效果不太一样，主要是前面的空格宽度不同。网上资料说不同的浏览器会有不同的默认字体，一般 IE默认字体都是宋体，而firefox和chrome的默认字体是Times New Roman，宋体是字符等宽的字体，但Times New &Roman不是字符等宽的字体，因为浏览器默认字体的不同，空格符&在不同的浏览器下面的显示宽度也不同。例如以下代码分别以IE和chrome进行测试&table&
&td&我是第一行&/td&
&td&我是第二行&/td&
&td&我是第三行&/td&
&/table&在chrome显示效果如下：IE9下显示效果如下：可以看出两个&在chrome中占一个汉字的宽度，而在IE中四个&才占一个汉字的宽度。解决办法：一、修改页面的编码格式&meta http-equiv=&content-type& content=&text/ charset=gbk&&和页面的编译方式(myeclipse中)然后IE右键修改编码显示格式即可二、(推荐)在空格那一行设置一下字体，把字体设置成任意一种字符等间距的字体就行了。如：&div style=&font-family: '宋体'&&我是第二行&/div&PS：替换为&如果style=&font-family: '宋体'& 实现不了，可将&宋体&改为&Times New Roman&作者：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
需要交换友链的请留言
访问：1364312次
积分：23960
积分：23960
排名：第196名
原创：550篇
转载：23篇
译文：26篇
评论：1448条实现单行文字两端对齐时，使用 & 当作空格和使用 white-space: pre 的原生空格有什么区别？哪个更好一些？
最近有一个项目页面中制作的时候，UI 大致是这样的（这是一个发表评论的页面）：
点：XXXX 友善度：XXXX使用心得：XXXX
为了保证对齐，所以我在写 HTML 的时候，在“优”和“点”之间用了4个 &nbsp 当空格。但是 leader 在检验的时候说这里不能用 NBSP，要用空格，然后在 CSS 里面加 white-space:pre。 因为为了保证项目进度（事实上我们最近很缺人~），我也没有太多的时间去和 leader 讨论这个，就按照他说的进行了修改。
但是我还是很想弄清楚这样有什么不好的，因为我记得刚刚开始学 XHTML 的时候，里面貌似有规定空格和大于小于什么的都需要转义，所以空格一般都是用 NBSP。虽然只是小问题，但是还是想请教一下，非常感谢……
首先提问者并没有把他的意图描述清楚。如果意图都未描述清楚，自然就难以进行“哪种更好一些”的比较，因为比较的基准就不存在。而描述原始意图的补充说明现在已经被删掉了，得查看日志才看得到。这里我照录一下：
最近有一个项目页面中制作的时候，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达成效果而耿耿于怀了。
二、理想主义方案：
text-align:
text-align: /* 对于除了IE之外的浏览器用尾对齐覆盖之前的两端对齐方式 */
text-align-last:
text-justify:
这里的理念是：
不同浏览器的表现不一样是可接受的。
在IE和将来正确实现CSS3-text模块的浏览器中将两端分布对齐。【注：因为手头没有IE9和IE10无法测试，有可能需要增加额外的hack。】
在当前除IE以外的主流浏览器中将右对齐。这是一种常见的label对齐设计，这里假设以此作为fallback是能为设计师所接受的。
建议各位选用 @贺师俊 给出的方案。:)
看了问题补充说明的日志才知道原来有那么一大段说明，于是才明白是个什么状况。其实最好还是把补充说明写出来。没看到原来补充说明的同学请亲手翻阅日志……
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）之比在不同字体中不一样，所以实在太傻了。
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 是格式，它是用为西文字体排印准备的技术来控制中文字符的间距。
[1]「This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.」
我补充一下：firefox12开始支持 -moz-text-align-last 从而实现单行（末行）东亚文字的两端对齐@梁海 上面是我写的一个例子主要的CSS如下：text-align:text-justify: inter-/* IE 私有属性 */-moz-text-align-last:
-ms-text-align-last:/* IE 8+ 支持 */text-align-last:/* IE5.5+ 支持 */可惜我测试了Chrome 22.0.1215.0 依然没有支持，Opera 那货就别提了。等到 webkit 都支持了 用这种方法做两端对齐就非常不错了！@贺师俊
看到这个问题，我也遇到过，解决方案：1。使用全角空格2。给第二个字加一个span，margin-left：1em
我建议使用　(全角空格)代表空格，万一你的项目后期想更换字体，使用&的话在不同的字体下差异很大。。。
贡献一个更好记的空格形式 & 这个空格的宽度正好是1em。另外还有 & 这是0.5em的空格。 所以可以写成：优
& 点优 & 缺 & 点使
&被视为字符，相当于一个英文字母或者数字，会受到font-family/font-size/font-weight影响。
而且碰到font-family:"arial,simsun"这种定义就更麻烦了，空格使用的是Arial的宽度，而非宋体宽度。
通常情况下为了对齐，不要用空格，text-indent或者padding-left可以更精确，也不会受到其他因素影响。
如果是为了纯中文文本对齐的话（补充问题），使用全角空格是比较好的办法，上面提到宽度污染都可以避免。
本人很少使用空格去对字符进行样式设定（也不提倡），所以没法回答你的原本问题
使用空格来对页面进行排版的优缺点
优点：省事，避免杀鸡用牛刀
缺点：不同字体的空格大小不同
css可以用来控制字体，两边对齐的方案也有，不过都不完美。
不过个人观点是，正文里面的文字排版没必要那么讲究吧。实在追求美观就用图片吧。
对 @梁海 同学的使用letter-spacing的办法表示赞赏。
插入 & 对于想插入空格而言像是硬编码。
推荐css方式。
网上找到的方法，巧妙的利用伪类，其实是多行文本的对齐代码如下：h1:after{display:inline-content:'';overflow-x:overflow-y:width:600height:40}display必须为inline-block，因为需要与h1的文本后面产生换行，才能诱发浏览器将h1视为多行文本，第一行文本就会有两端对齐效果了。后面的overflow等属性与h1一致。&html&&head&&style type="text/css"&h1 {text-align:overflow-x:overflow-y:width:600height:40}h1:after{display:inline-content:'';overflow-x:overflow-y:width:600height:40}&/style&&/head&&body&&h1&实现单行文本的内容两端对齐&/h1&&/body&&/html&
已有帐号？
无法登录？
社交帐号登录jsoup解析font中的特定文字 - 开源中国社区
当前访客身份：游客 [
当前位置：
font size=&4&&2013年硕士研究生入学考试初试成绩已公布，考生可登陆&B&&A href=&http://www.syrz.net/Struts2/doctorScoreAction_index.action&&http://www.syrz.net/Struts2/doctorScoreAction_index.action&/A&&/B&&B&或&/B&&B&http://202.118.7.154:8080/Struts2/doctorScoreAction_index.action&/B&&B&网址&/B&输入考生编号、姓名和身份证号即可查询初试成绩。
&DIV&&p style='line-height: 200%'&&FONT size=6&&&& 考生也可登陆我校网站，点击研究生招生页面，在研究生学院网页上的服务区栏中点击成绩查询系统，输入考生编号和身份证号即可查询初试成绩（考试科目查询结果显示为“-1”表示考生的该考试科目为缺考）。&/FONT&&/DIV&
&DIV&&p style='line-height: 200%'&&FONT size=6&&&& 注：考生如对成绩有疑问，可持本人身份证于2月21日上午8:30—下午3:30到我校研究生招生办公室（4号教学楼415室）申请查询。查到成绩的考生请耐心等待国家复试分数线并请留意我校网站上的复试通知。&/FONT&&/DIV&
&P&&FONT size=6&&&&&&& 研究生招生办公室&/FONT&&/P&
&P&&FONT size=6&&/FONT&&/P&
&P&&FONT size=6&&&&&&&&&&&&&&&&&&&&&&&&&& &BR&&/FONT&&/P&&/font& 各位大神请问下这个如用jsoup解析出来其中的 文字& 并把每段文字保存在数组中，每个p标签里的文字好解析 就是第一个p之前的文字“2013年硕士研究生………………输入准考证即可查询”该怎么解析啊？？、、
共有2个答案
<span class="a_vote_num" id="a_vote_num_
Documents doc = Jspup.parse(&这段html字符串&);
//使用select()方法获取所有的font段落
Elements emts = doc.select(&font&);
List&String&array= new ArrayList&String&();
//遍历出来，并填充到array
for(Element e:emts)
& & //txt()方法为获取段中的文字
& & array.add(e.text());
--- 共有 2 条评论 ---
不对啊 有重复的 第一个p之前的文字没有和第一个p中的文字分开啊
(3年前)&nbsp&
竟然打错俩字母，看来晚上真的吃多了。。好饱
(3年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
&(.+?)[(.+?)^&]*& 去掉所有的html代码...然后自己折腾下
更多开发者职位上
有什么技术问题吗？
xhkevin...的其它问题
类似的话题}