一、csstext-indent的定義
css text-indent屬性用於控制文本塊中第一行的縮進。應用於一個塊級元素，只有文本內容會受到影響。該屬性不會影響行內元素的文本。
代碼示例：
p {
text-indent: 2em;
}
二、csstext-indent的使用場景
1、在段落中實現首行縮進效果。
2、在嵌套列表中實現層級縮進效果。
代碼示例：
/* 段落首行縮進 */
p {
text-indent: 2em;
}
/* 嵌套列表層級縮進 */
ul {
text-indent: 2em;
}
ul ul {
text-indent: 4em;
}
ul ul ul {
text-indent: 6em;
}
三、csstext-indent的特殊效果
1、應用於表格中，實現首列縮進效果。
2、應用於強制換行（
）元素中，實現縮進效果。
3、應用於鏈接中，實現鏈接的”掛鉤”效果。
代碼示例：
/* 表格首列縮進 */
table td:first-child {
text-indent: 2em;
}
/*
標籤縮進 */
br {
display: block;
content: "";
margin-left: 2em;
}
/* 鏈接掛鉤效果 */
a {
text-indent: -2em;
padding-left: 2em;
}
四、csstext-indent的注意事項
1、負值text-indent會導致第一行文本超出父級元素邊界，需要用padding補償。
2、text-indent的另一個作用是取消列表的默認縮進效果。
代碼示例：
/* 取消默認列表縮進 */
ul, ol {
padding: 0;
margin: 0;
text-indent: 0;
}
五、csstext-indent的兼容性
text-indent在所有主流瀏覽器中都有很好的支持。但在使用負值text-indent時，IE7及以下版本不會將padding也加以縮進。因此需要為這些版本添加特定樣式。
代碼示例：
/* IE7及以下版本處理 */
* html ul li, * html ol li {
margin-left: 20px;
text-indent: -20px;
}
以上就是csstext-indent的全面解析。雖然這個屬性非常簡單易用，但在某些情況下還是需要注意一些細節問題。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/244071.html
微信掃一掃 
支付寶掃一掃 