由于設(shè)計需要，我們的頁面中經(jīng)常會有如下效果：

可是我們實現(xiàn)出來的效果確實這樣的：

看起來兩行文本沒有對齊嘛，仔細(xì)檢查后原來是【字符的原因，因為是中文標(biāo)點符號占半個字的位置。不信？選中下漢字標(biāo)點符號看一下即可。至于為什么會占半個字的位置，個人覺得可能是為了方便排版，標(biāo)點符號也要占一個漢字的空間（想想小時候?qū)懙淖魑臉?biāo)點符號是不是都占一格）。標(biāo)點符號相對于格子左對齊，所以自然一側(cè)留下一半空間。具體原因求科普！查明原因即對癥下藥，既然中文標(biāo)點符號占漢字半個位置，那么我們使用CSStext-indent：-.5em;樣式修改即可。修改后的效果如下圖所示：

text-indent：CSS1版本屬性，規(guī)定文本塊中首行文本的縮進(jìn)。允許使用負(fù)值。如果使用負(fù)值，那么首行會被縮進(jìn)到左邊。可使用指定長度或百分比和inherit，任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

em ：CSS3相對單位，基準(zhǔn)點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認(rèn)字體是16px），整個頁面內(nèi)1em不是一個固定的值。

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

• 首行縮進(jìn)兩字符：text-indent：2em;
• 隱藏字符：text-indent: -999em;
• 更多玩法，等你發(fā)掘

---

擴展鏈接：

CSS text-indent屬性

[text-indent:-9999px 字體隱藏問題

轉(zhuǎn)載于:https://www.cnblogs.com/cjlll/p/6295644.html

總結(jié)

以上是生活随笔為你收集整理的巧用css text-indent减小中文标点符号的占位大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。