首頁 > web前端 > css教學 > CSS裡的text-indent怎麼使用

CSS裡的text-indent怎麼使用

php中世界最好的语言
發布: 2017-11-21 17:10:24
原創
2985 人瀏覽過

CSS裡的text-indent使用很簡單,主要是看text-indent縮排語法與結構,那麼下面我們來跟大家講解一下並且舉一個小案例,

text-indent縮排語法與結構

.div{text-indent:25px}
登入後複製

這裡div物件內段落首行開頭文字縮排了25像素。

css text-indent文字縮排樣式屬性單字,text-indent的值跟數字+單位組成縮排樣式。通常text-indent縮排屬性會對段落首行開頭文字文字進行縮排顯示。如果使用html br換行標籤,第二個換行開始也不會出現縮排效果。如果使用了html P段落標籤段落換行,將會出現每個p段落換行開頭都會縮進,這裡我們給大家透過案例示範給大家,希望透過DIV案例掌握CSS text-indent縮排樣式。

1、CSS程式碼

.div{ text-indent:35px}
HTML代码片段
<div class="div"> 
<p>第一段开始缩进效果<br /> 
使用br标签的换行将不会缩进 
</p> 
<p>第二段使用p标签段落首行也会缩进<br /> 
第二行使用了br不会缩进<br /> 
第三行提行使用了br也不会缩进</p> 
</div>
登入後複製

首行段落文字縮排text-indent總結

我們要讓每段文字開頭縮進,並且可以控制縮排距離我使用text-indent縮排單字。如果不想使用text-indent樣式進行縮進,我可以使用空格來實現,但需要多打幾個html空格字元“ ”實現空格字元佔位縮進,你可以詳細了解html多空格字元應用。

text-indent的使用方法就這麼多,需要的朋友可以保存一下,也請大家持續關注本站的其他更新

相關閱讀:

什麼是CSS


#幾種純css製作的小功能實例


為什麼有時候DIV CSS載入失敗

以上是CSS裡的text-indent怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板