text-indent

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

text-indent 属性指定文本在元素文本内容的第一行开始之前应该移动多少水平空间。 间距从块级容器元素的起始边缘计算。

起始边缘通常在左侧,但在从右到左模式下可以是右侧,如 direction 属性。

当在块元素上指定时,text-indent 属性会被继承,这意味着它也会影响 inline-block 后代元素。 在处理内联块子元素时,您可能希望强制它们为 text-indent: 0;

语法

text-indent: <length> | <percentage> | inherit  && [ hanging || each-line ] 

p {
  text-indent: 1.5em;
}

一个常见的用例仅仅是样式。 缩进段落的首行有点过时,可以让人产生这种感觉。 它可以代替段落后的空格,作为另一种视觉指示器,尽管空格在一般情况下可能更易读。

另一个常见的用例是 “图片替换”,其中文本通过文本缩进被踢出元素并隐藏溢出。

悬挂

hangingtext-indent 属性的 **实验性和非官方值**。 它反转了哪些行被缩进。 基本上,它缩进除了第一行之外的每一行,从而产生某种 悬挂标点符号

此值是一个标志,与常见值(如长度)一起使用。

每行

each-linetext-indent 属性的 **实验性和非官方值**。 想法是缩进强制换行(使用 <br>)后的每一行。

此值是一个标志,与常见值(如长度)一起使用。

演示

查看 CodePen 上 Chris Coyier 的 Pen text-indent (@chriscoyier)。

相关属性

其他资源

浏览器支持

基本支持

Chrome Safari Firefox Opera IE Android iOS
任何 任何 任何 3.5+ 3+ 任何 任何

悬挂值

Chrome Safari Firefox Opera IE Android iOS

每行值

Chrome Safari Firefox Opera IE Android iOS