html5文本缩进元素,CSS属性参考

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

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

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

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

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

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

jQuery之家

h1.image-replacement {

width: 350px;

height: 75px;

background: url("images/logo.png");

text-indent: -9999px;

}

官方语法

text-indent: | | inherit

参数：

：使用固定的值来指定文本的缩进。

：使用百分比值来指定文本的缩进，百分比值相对于文本的块级包含元素。

inherit：继承父元素的文本缩进值。

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

hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

each-line：文本缩进会影响第一行，以及使用
强制断行后的第一行。

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值是实验性的取值，目前没有浏览器支持。

html5文本缩进元素,CSS属性参考 | text-indent相关推荐

html5 first child,:first-child | CSS属性参考
CSS :first-child伪类选择器用于匹配父元素中的第一个子元素. :first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素,例如: 第一个段落... 第二个段落... 如果使用 ...
HTML5所有常用元素和属性
HTML5所有常用元素和属性 - 注释- <html>根元素- <head>页面头部分,可以包含如下子元素> <script> ...
html5 css 文本缩进,使用 CSS 文本缩进和 Padding 隐藏文本 - 文章教程
一个网站都会有一个 LOGO,这似乎是一条通用的布局和内容,而对于这个 LOGO 的代码编写,一般都会使用插入 LOGO 图片,然后再写上文字的描述,其实这样的方法有点过时了,因为这些描述文本只针对 ...
html文本缩进自动换行,CSS 段落/换行/缩进
CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...
HTML5 文本语义元素
文本语义元素 HTML中,根据逻辑来划分和识别文本在网页中所起的作用,给文本添加内涵,即所谓文本语义元素. 除了标题元素之外,HTML还提供了许多其他的元素,来为内容作上标记,以便能够识别它们在网页中 ...
html left属性,CSS属性参考 | left
CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...
javascript操作html元素CSS属性
以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .or ...
HTML5新增页面元素与属性
1. 结构元素 (1)<header>元素 HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容.其基本语法格式如下: <h ...
html5 text align,CSS属性参考 | text-align
CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式. CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式.虽然这个属性 ...

html5文本缩进元素,CSS属性参考 | text-indent

html5文本缩进元素,CSS属性参考 | text-indent相关推荐

最新文章

热门文章