由于设计需要,我们的页面中经常会有如下效果:
可是我们实现出来的效果确实这样的:
看起来两行文本没有对齐嘛,仔细检查后原来是【字符的原因,因为是中文标点符号占半个字的位置。不信?选中下汉字标点符号看一下即可。至于为什么会占半个字的位置,个人觉得可能是为了方便排版,标点符号也要占一个汉字的空间(想想小时候写的作文标点符号是不是都占一格)。标点符号相对于格子左对齐,所以自然一侧留下一半空间。具体原因求科普!查明原因即对症下药,既然中文标点符号占汉字半个位置,那么我们使用CSStext-indent:-.5em;样式修改即可。修改后的效果如下图所示: