许多时辰，但愿可以或许在 HTML 中行使空格排版。但赏识器在理会 HTML 时，会独霸续的空格理会成一个，以是我们会行使 等这样的占位符。
可是 也不是很靠得住，好比空格间距很是大，那么我们必需增进多个占位符，同时页面的体积会变得很是大。
同时，留意到 Safari 中的 宽度是已设定字符的空格宽度（Safari 的默认字体为 Times），也就是说一此中笔墨符必要两个占位符。
详细环境如下图所示：
着实，这不是 Safari 的题目，而是字体的题目。办理的方法就是行使下面的属性
font-family: '宋体';将 Safari 的默认字体配置成“宋体”等中英文等宽的字体，就能办理。Windows 版本的 Safari 字体配置，必要直接行使中文“宋体”这样的名称而不是“Simsun”（相识缘故起因的兄弟请汇报我）。
但至此，我们的基础方针没有办理，就是可否停止行使 这样的占位符，而行使“原生”的空格。思量针对空缺的响应 CSS 属性，详细相识有关 white-space 的用法，接下来就较量甜头理赏罚了。
总结下行使 white-space 实现等宽空格的前提，有两个。必要配置对应的属性
white-space: pre;
然后配置等宽字符（包罗等宽空格）即可。综合起来，就是这样
font-family: '宋体', Simsun;
white-space: pre;
因为行使了中文 CSS 名称，以是在现实行使中必要思量样式的字符编码题目。同时，必要特殊思量的是，苹果机是否有“宋体”（可能其他等宽的字体），有苹果机的兄弟请资助测试下。
--Split--
感激 小马 提供的其它一个思绪，就是行使 em 单元。1em 简朴的说，就可以以为是一个字符宽度；同理，.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--
针对这上述的两种差异要领，小我私人以为该当凭证现实环境思量回收。好比第一种要领，固然依靠详细的等宽字体，但没有添加其他特另外布局，对付往后的维护会越发的利便；第二种要领，则更多的思量了现实的应用环境（同时也不消依靠详细的等宽字体），可是也添加了特另外布局。
以是，如思量到往后的可维护性，同时“语义”的角度上说明，推许第一种做法。而现实的应用环境下，同时必要应用较量伟大时，小我私人会选用第二种。
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
