CSS怎样实现首行缩进-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

CSS怎样实现首行缩进-创新互联

CSS怎样实现首行缩进?针对这个问题,今天小编总结了这篇文章,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。

创新互联总部坐落于成都市区,致力网站建设服务有做网站、网站制作、网络营销策划、网页设计、网站维护、公众号搭建、微信小程序、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设,为互联网品牌在互动行销领域创造价值而不懈努力!

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:

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 属性可以继承,请考虑如下标记:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
some text. some text. some text.

this is a paragragh.

使用百分比值

text-indent 可以使用所有长度单位,包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中,缩进值是父元素的 20%,即 100 个像素:

div {width: 500px;}
p {text-indent: 20%;}

this is a paragragh

以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

扩展:

CSS 文本属性(Text)

属性描述CSS
color设置文本的颜色。1
direction规定文本的方向 / 书写方向。2
letter-spacing设置字符间距。1
line-height设置行高。1
text-align规定文本的水平对齐方式。1
text-decoration规定添加到文本的装饰效果。1
text-indent规定文本块首行的缩进。1
text-shadow规定添加到文本的阴影效果。2
text-transform控制文本的大小写。1
unicode-bidi设置文本方向。2
white-space规定如何处理元素中的空白。1
word-spacing设置单词间距。1
hanging-punctuation规定标点字符是否位于线框之外。3
punctuation-trim规定是否对标点字符进行修剪。3
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3
text-outline规定文本的轮廓。3
text-overflow规定当文本溢出包含元素时发生的事情。3
text-shadow向文本添加阴影。3
text-wrap规定文本的换行规则。3
word-break规定非中日韩文本的换行规则。3
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

关于CSS实现首行缩进的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:CSS怎样实现首行缩进-创新互联
网页URL:http://kswsj.cn/article/djpsge.html

其他资讯