CSS 段落文字縮排、凸排 (text-indent)

小蛙在工作上常會遇到內容太長需要縮排的狀況，或有些文章的排版也是會用到首行縮排，這篇文章把 CSS text-indent 文字縮排 的簡單使用記下來。

text-indent 文字縮排

小蛙無設定縮排的文字（由左至右、上至下排列），樣式如下

報章雜誌上常可見首行縮排兩個字的排版

使用 text-indent: 2em; 即可輕鬆達成首行縮排兩個字，也可以透過 px 或其他單位進行調整

<style>
.indent-2{
  text-indent: 2em;
}
</style>

<h3>首行縮排二字</h3>
<div class="indent-2">現在雲端儲存服務眾星雲集，例如：Google 雲端硬碟、Apple iCloud、Microsoft OneDrive、Dropbox、Box … 等，在共同編輯及使用的情況下，版本管理就非常重要了，這篇文章把 Google 雲端硬碟檔案版本管理的方法記下來。</div>

text-indent 還能做什麼

小蛙一開始遇到 text-indent 是因為要做出下面這種排版

這個例子有 5 個字（包含一個全形：），我們先把 2em 改成 5em，剛剛我們設定 text-indent: 2em; 是首行往右邊縮 2 個字，那這個需求的理解是不是照理推改成 text-indent: -5em; 就可以變成往左邊的了？

結果是 … 最左邊的字超出畫面，嗯，既然提到邊界，css 有一個左邊邊界的屬性 margin-left，加入 margin-left: 5em; 看看能不能把凸出去的內容再擠回來

效果看起來的確是我們要的了，統整使用到的 css，只要把 text-indent 擠出去的位移，再用 margin-left 推回來，不管後面幾行要縮排多少，都可以自己調整囉！

<style>
.indent-title-5{
  text-indent: -5em;
  margin-left: 5em;
}
</style>

<div class="indent-title-5">文章摘要：現在雲端儲存服務眾星雲集，例如：Google 雲端硬碟、Apple iCloud、Microsoft OneDrive、Dropbox、Box … 等，在共同編輯及使用的情況下，版本管理就非常重要了，這篇文章把 Google 雲端硬碟檔案版本管理的方法記下來。</div>

CSS 相關文章：

1. CSS 段落文字縮排、凸排 (text-indent)