CSS text-indent属性设置段落首行文字缩进笔记

原创 国哥笔记  2018-09-20 19:42  阅读 1,311 views 次

text-indent属性定义及用法

css中,text-indent属性是用来规定文本块中首行文本的缩进。当需要每个段落首行开头文字缩进,我们就可以使用text-indent属性来设置(如:.ggbiji{text-indent:18px}; 设置了ggbiji对象内的段落首行文字开头缩进18个像素)。

text-indent属性语法格式

css语法:text-indent: length / % / inherit;

JavaScript 语法: object.style.textIndent=" length / % / inherit";

text-indent属性值说明

  • length:自定义缩进像素(默认值为0)。
  • %:基于父元素宽度的百分比的缩进。
  • inherit:从父元素继承text-indent属性的值。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS text-indent属性设置段落首行文字缩进笔记</title>
<style type="text/css">
body{background: #ddd;font-size:18px ;}
#a{text-indent:20px;}
</style>
</head>
<body>
<div id = "a">
<p>第一段开始缩进效果<br/>使用br标签换行不会缩进</p>
<p>第二段使用p标签段落首行会缩进,<br/>使用br标签换行不会缩进<br/>
</div>
</body>
</html>

运行结果:

CSS text-indent属性设置段落首行文字缩进笔记

说明:text-indent缩进属性是对段落首行开头文本文字进行缩进。如果使用br标签的换行,换行的文本不会出现缩进效果。如果使用了p段落标签,每段的首行开头文本文字会进行缩进。

如果我们不想使用text-indent属性来实现缩进(如:就一两个地方需要缩进,就没必要使用text-indent属性),我们可以使用空格符来占位来达到相同的效果。有关空格符的用法请移步到:HTML中插入多个空格

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-indent.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情