在 CSS 中, 我们可以使用 text-indent 属性来实现首行缩进效果, 本篇文章就来带大家了解 text-indent 属性是怎样设置首行缩进样式的. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
首先我们来了解一下有关于 CSS text-indent 属性的相关知识.
text-indent 属性可以设置文本块 (块级元素) 中首行文本的缩进; 它允许使用负值, 但如果使用了负值, 那么首行会被缩进到左边.
注意: 在 CSS 2.1 之前, text-indent 总是继承计算值, 而不是声明值.
下面介绍一下 text-indent 属性可以通过下面的属性值来设置首行的缩进:
length: 定义固定的缩进, 默认值为 0.
%: 定义基于父元素宽度的百分比的缩进.
我们通过简单的代码示例来看看效果:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title > 首行缩进</title>
- <style>
- .demo{
- width: 500px;
- height: 200px;
- margin: 50px auto;
- }
- .p1{
- text-indent:36px;
- }
- .p2{
- text-indent:10%;
- }
- </style>
- </head>
- <body>
- <div class="demo">
- <p>demo 盒子宽 500px 时:</p>
- <p class="p1">这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码,
是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字.
这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字.
这是一段测试代码, 是关于 CSS 文本缩进的一段文字.<b>text-indent:36px;</b>
- </p>
- <p class="p2">这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码,
是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码,
是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码,
是关于 CSS 文本缩进的一段文字.<b>text-indent:10%;</b>
- </p>
- </div>
- </body>
- </HTML>
效果图:
第一个 p 标签内的段落文本缩进效果没有改变, 但第二个 p 标签内的段落文本缩进长度变大了, 可以看出用 % 设置的缩进是根据父元素的大小改变的.
下面我们就来看看 CSS 如何实现首行缩进 2 个字符效果:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title > 首行缩进</title>
- <style>
- .demo{
- width: 550px;
- height: 200px;
- margin: 50px auto;
- }
- p{
- text-indent:2em;/*em 是相对单位, 2em 即现在一个字大小的两倍 */
- }
- }
- </style>
- </head>
- <body>
- <div class="demo">
- <p>
这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字.
这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字.
这是一段测试代码, 是关于 CSS 文本缩进的一段文字. 这是一段测试代码, 是关于 CSS 文本缩进的一段文字.
- </p>
- </div>
- </body>
- </HTML>
效果图:
在这里我们使用到了一种长度单位 em, 那么什么是 em?
em 是一种相对长度单位, 相对于当前对象内文本的字体尺寸. 而我们中文段落一般每段前空两个汉字, 实际上, 就是首行缩进了 2em.
来源: http://www.css88.com/qa/css3/12705.html