电话
13363039260
CSS怎样缩进文本？
2024-01-18 10:37 小编
CSS文本属性可定义文本的外观。
缩进文本
把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。(推荐学习：CSS入门教程)
CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：
p{text-indent:5em;}
注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p{text-indent:-5em;}
不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p{text-indent:-5em;padding-left:5em;}
使用百分比值
text-indent可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在下例中，缩进值是父元素的20%，即100个像素：
div{width:500px;}
p{text-indent:20%;}
<div>
<p>thisisaparagragh</p>
</div>
继承
text-indent属性可以继承，请考虑如下标记：
div#outer{width:500px;}
div#inner{text-indent:10%;}
p{width:200px;}
<divid="outer">
<divid="inner">sometext.sometext.sometext.
<p>thisisaparagragh.</p>
</div>
</div>
以上标记中的段落也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值。
猜你喜欢
联络方式：
13363039260
微信二维码 