CSS屬性（2）——text-indent 屬性
阿新 • • 發佈：2019-02-12
text-indent 屬性規定文字塊中首行文字的縮排，也允許使用負值。如果使用負值，那麼首行會被縮排到左邊。
示例：
<p>
北京時間8月7日，美媒CheatSheet分析了騎士新賽季衛冕冠軍的難度，認為他們有三大優勢護體，完全配得上奪冠大熱的稱號。
騎士上賽季打破了克利夫蘭52年的冠軍荒，如今外界所關注的便是他們能否衛冕冠軍。勒布朗-詹姆斯、凱里-歐文和凱文-樂福的
三巨頭還在，但由於聯盟其他球隊實力的暴漲，他們衛冕的難度顯然十分之大。
</p>
p {text-indent: 60px}展示的效果：
另外使用text-indent 屬性可以實現一些點選文字讓文字動起來的效果。
例如：
<body>
<h2>是否繼續下載？</h2>
<a class="yes mode">是</a>
<a class="yes">否</a>
</body>.yes{ width: 50px; height: 50px; border: 3px solid #ccc; border-radius: 25%; text-align: center; line-height: 50px; background-color: darkseagreen; cursor: pointer; float: left; margin-left: 10px; } .mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl; } .yes:active { text-indent: 6px; }
實現的效果如下：
滑鼠點選“是”，可以看到文字向下運動了6px，點選“否”，可以看到文字向右運動了6px。
.mode 設定了文字的排版格式，預設是左右移動的，使用.mode強制文字上下排版，所以點選是向下運動的。