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

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

text-indent 文字縮排

小蛙無設定縮排的文字(由左至右、上至下排列),樣式如下

網頁文字無縮排

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

text-indent: 2em; 首頁縮排 2 字

使用 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 是因為要做出下面這種排版

text-indent: 5em; margin-left: 5em; 首頁凸排 5 字,左邊邊界右推 5 字

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

text-indent: 5em; 首頁凸排 5 字

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

text-indent: 5em; margin-left: 5em; 首頁凸排 5 字,左邊邊界右推 5 字

效果看起來的確是我們要的了,統整使用到的 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)

您可能也想知道:

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料