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;
}
一个常见的用例仅仅是样式。 缩进段落的首行有点过时,可以让人产生这种感觉。 它可以代替段落后的空格,作为另一种视觉指示器,尽管空格在一般情况下可能更易读。
另一个常见的用例是 “图片替换”,其中文本通过文本缩进被踢出元素并隐藏溢出。
悬挂
hanging
是 text-indent
属性的 **实验性和非官方值**。 它反转了哪些行被缩进。 基本上,它缩进除了第一行之外的每一行,从而产生某种 悬挂标点符号。
此值是一个标志,与常见值(如长度)一起使用。
每行
each-line
是 text-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 |
---|---|---|---|---|---|---|
无 | 无 | 无 | 无 | 无 | 无 | 无 |
adidas パーカー
> [_您要在此处链接的文本..._****](http://prout.com "prout")
老兄,我认为你的意思是写“每行都是一个实验性的非官方值……”
不错
不错.. 我在移动应用程序中使用它,在纵向视图中它可以工作.. 在横向视图中它不能工作
gmail 应用程序不支持此功能,是否有其他可以用来替换 text-indent 的东西? 谢谢
有人弄清楚如何做一个双悬挂缩进,也就是悬挂缩进的悬挂缩进。例如,假设我有一个
<div>
,它包含一个超出 div 长度的项目符号线。我使用悬挂缩进将后续行与第一行实际文本的开头对齐,并将项目符号留在前面。到目前为止一切顺利。现在假设该项目符号线具有一些子行(每行都在其自己的<div>
中),这些子行应该正确缩进到项目符号线文本的后面。我可以简单地使用 text-indent 属性,这很好,除非此子行超出 div 的宽度。在这种情况下,后续行将与最前面的实际项目符号对齐。任何关于如何处理这种情况的建议将不胜感激。应该强调的是,text-indent 属性将被 **继承**。
使用此示例来了解此详细信息的重要性
使用此 CSS
那么“dolor sit amet”部分将被双重缩进,因为父级声明。我找了几个小时我的应用程序的显示错误,我希望我可以节省其他人的时间。