CSS处理访问器的等宽空格难题

2021-03-16 09:02 jianzhan

原文:http://www.gracecode.com/Archive/Display/2254
许多情况下,期待可以在 HTML 中应用空格排版。但访问器在分析 HTML 时,会把持续的空格分析成1个,因此大家会应用   等这样的占位符。
可是   也并不是很靠谱,例如空格间隔十分大,那末大家务必提升好几个占位符,另外网页页面的体积会变得十分大。
另外,留意到 Safari 中的   宽度是已设置标识符的空格宽度(Safari 的默认设置字体样式为 Times),也便是说1个汉语标识符必须两个占位符。
实际状况以下图所示:

实际上,这并不是 Safari 的难题,而是字体样式的难题。处理的方法便是应用下面的特性
font-family: '宋体';将 Safari 的默认设置字体样式设定成“宋体”等中英文等宽的字体样式,就可以处理。Windows 版本号的 Safari 字体样式设定,必须立即应用汉语“宋体”这样的名字而并不是“Simsun”(掌握缘故的弟兄请告知我)。
但至此,大家的压根总体目标沒有处理,便是能否防止应用   这样的占位符,而应用“原生态”的空格。考虑到对于空白的相应 CSS 特性,实际掌握相关 white-space 的用法,接下来就较为益处理了。
总结下应用 white-space 完成等宽空格的标准,有两个。必须设定对应的特性
white-space: pre;
随后设定等宽标识符(包含等宽空格)便可。综合性起来,便是这样
font-family: '宋体', Simsun;
white-space: pre;

因为应用了汉语 CSS 名字,因此在具体应用中必须考虑到款式的标识符编号难题。另外,必须附加考虑到的是,iPhone机是不是有“宋体”(或别的等宽的字体样式),有iPhone机的弟兄请帮忙检测下。
--Split--
谢谢 小马 出示的此外1个思路,便是应用 em 企业。1em 简易的说,便可以觉得是1个标识符宽度;同理,.5em 便是半个标识符。那末,上面的状况便可以应用这样写。
<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝:</span><br />
<span>我的淘宝:</span><br />
<span>社<ins class="two-word"></ins>区:</span><br />

对应的 CSS 应为
.half-word {width: .5em;}
.two-word{width:2em;}

经检测根据。
--Split--
对于这上述的两种不一样方式,本人觉得理应依照具体状况考虑到选用。例如第1种方式,尽管依靠实际的等宽字体样式,但沒有加上别的附加的构造,针对之后的维护保养会更为的便捷;第2种方式,则更多的考虑到了具体的运用状况(另外也无需依靠实际的等宽字体样式),可是也加上了附加的构造。
因此,如考虑到到之后的可维护保养性,另外“词义”的角度上剖析,青睐第1种做法。而具体的运用状况下,另外必须运用较为繁杂时,本人会采用第2种。
另,谢谢 小虎 的讲话