Vexed's Blog

CSS 屬性 text-indent 大致上來說可以有三種用法︰ (1) 讓首行縮排 、 (2) 讓首行凸出來 、 (3) 讓字變不見：

1. 讓首行縮排

   也就是 text-indent 的值為正，像 text-indent : 36px 就是縮排 36px 。

   p { text-indent : 36px }

   我是範例！ CSS 屬性 text-indent 讓首行縮排 Demo ，我要寫長一點才可以長到換行！還不夠長、再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加再加。

2. 讓首行凸出來

   讓 text-indent 的值是負的，首行就會凸出來，像 text-indent : -36px 就是凸出來 36px 。

   p { text-indent : -36px }

   姓名: 我是範例

   描述: 我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述。

   可以搭配 margin-left 使用，像下面這樣︰

   p { margin-left : 36px; text-indent : -36px }

   姓名: 我是範例

   描述: 我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述。

但 text-indent 在 IE6 IE7 有不小的問題：

1. 在 IE6 IE7 ，如果 text-indent 元素設定 display : inline-block ，且此元素是父元素的第一個子元素，整個父元素就會偏移 text-indent 所設定的值。例如 text-indent : 32px 就會往右偏移 32px 。
2. 在 IE6 如果 text-indent 元素 display 為 block ，則顯示位置超出此元素之父元素的文字會消失。如果 text-indent 元素 display 為 inline-block ，則顯示位置超出此元素的文字會消失。
3. display : inline 元素不該可以設定 text-indent ，但 IE6 IE7 可以。

也因為以上問題的第一點，讓字變不見多半改用 padding-left 實作，詳情請見用 CSS 讓連結以圖片顯示。