巧用css text-indent减小中文标点符号的占位大小

由于设计需要，我们的页面中经常会有如下效果：

可是我们实现出来的效果确实这样的：

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

text-indent：CSS1版本属性，规定文本块中首行文本的缩进。允许使用负值。如果使用负值，那么首行会被缩进到左边。可使用指定长度或百分比和inherit，任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

em ：CSS3相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

除了上述的使用，那么text-indent还有什么妙用呢？

• 首行缩进两字符：text-indent：2em;
• 隐藏字符：text-indent: -999em;
• 更多玩法，等你发掘

---

扩展链接：

1. CSS text-indent属性
2. [text-indent:-9999px 字体隐藏问题