由于設計需要，我們的頁面中經常會有如下效果：

可是我們實現出來的效果確實這樣的：

看起來兩行文本沒有對齊嘛，仔細檢查后原來是【字符的原因，因為是中文標點符號占半個字的位置。不信？選中下漢字標點符號看一下即可。至于為什么會占半個字的位置，個人覺得可能是為了方便排版，標點符號也要占一個漢字的空間（想想小時候寫的作文標點符號是不是都占一格）。標點符號相對于格子左對齊，所以自然一側留下一半空間。具體原因求科普！查明原因即對癥下藥，既然中文標點符號占漢字半個位置，那么我們使用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;
• 更多玩法，等你發掘

---

擴展鏈接：

CSS text-indent屬性

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

轉載于:https://www.cnblogs.com/cjlll/p/6295644.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。