好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

text-indent

CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格。也就是通常所说的首行文本缩进。

在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观,也便于读者阅读。

文本缩进的距离是相对于文本包含块的左侧边缘(或右侧边缘,如果是文本方向是rtl的话),文本的方向由属性来决定。

文本缩进的值可以是正数,也可以是负数。负数值可能会受某些具体实现的限制。

text-indent 属性会级联,当在一个父元素上指定了 text-indent 属性之后,它会影响所有的 inline-block 子元素。由于这个原因,我们通常会在 inline-block 元素上指定 text-indent: 0 。

text-indent 属性也经常被用于制作图片替换技术。图片替换技术是指在原来显示文字的地方(通常在标题处),使用图片来替换文字。例如:

<h1 class="image-replacement">
  jQuery之家
</h1>  
h1.image-replacement {
  width: 350px; 
  height: 75px;
  background: url("images/logo.png");
  text-indent: -9999px;
}  
官方语法
text-indent: <length> | <percentage> | inherit 

参数:

<length> :使用固定的值来指定文本的缩进。 <percentage> :使用百分比值来指定文本的缩进,百分比值相对于文本的块级包含元素。 inherit :继承父元素的文本缩进值。

另外还有两个实验性的值: hanging 和 each-line 。

hanging :该值会对所有的行进行反转缩进:除了第一行之外的所有的行都会被缩进,看起来就像第一行设置了一个负的缩进值。 each-line :文本缩进会影响第一行,以及使用 <br> 强制断行后的第一行。

text-indent 属性的初始值为0。

应用范围

text-indent 属性可以应用在所有块级元素上。

示例代码
text-indent: 3em
text-indent: 40px
text-indent: 15%
text-indent: each-line
text-indent: hanging

text-indent: inherit
在线演示

下面的例子演示了2个文字宽度的文本缩进效果。

时光赋予了万物更多的明媚与绚烂,“等闲识得春风面,万紫千红总是春”。绿,或许被繁锦所掩盖,生命的底色亦或被万物所凋弊,而谁又注意,缤纷之下,恒古的凝望与守候。如此看来,绿既是多彩的前奏,又是绚烂孕育者。绿,贯穿生命的始终,感染着万物,滋养着生命,其中的意境,几人知晓。

浏览器支持

所有现代浏览器都支持 text-indent 属性,包括:Chrome, Firefox, Safari, Opera, IE, Android 和 iOS。

hanging 和 each-line 值是实验性的取值,目前没有浏览器支持。

查看更多关于text-indent的详细内容...

  阅读:49次

上一篇: transition-duration

下一篇:transition-delay

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]