一、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/n/244071.html
微信扫一扫 
支付宝扫一扫 