不要使用CSS缩进第一段的第一行



如何防止节中第一段的行缩进?

这在许多学术形式中非常常见。

样本输出

简介

对于本节的第一段,没有缩进: Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incidicount ut labore et dolore magna aliqua。在欧盟,我的名字是刚果。这是一种生活方式。

 nbsp nbsp nbsp对于以下所有段落,都有一个由文本缩进设置的缩进:Sed velit dignissim sodales ut.Nuc pulvinar sapien et ligula ullamcorper malesuada proin libero。Tristique et egestas quis ipsum suspenddise ultrices gravida dictum。Augue mauris Augue neque gravida in fermentum et sollicitudin ac.

 nbsp nbsp nbsp对于以下所有段落,都有一个由文本缩进设置的缩进:hendrerit中的Nunc sed id semper risus。非quam lacus suspenddise faucibus interdum posuere lorem。Ut porttitor leo a diam sollicitudin tempor id。Facilisis mauris坐在amet massa vitae tortor调味品lacinia quis。Sagittis vitae et leo duis ut.

现在,我的CSS 中有以下代码

p {
text-indent: 50px;
}

您可能需要使用css伪类"第一个类型">

p:first-of-type {
text-indent: 0;
}

正如css选择器所暗示的,样式将只应用于第一个p元素。

您可以像这样使用CSS相邻兄弟组合子:

p + p {
text-indent: 50px;
}

运行代码以查看结果

p + p {
text-indent: 50px;
}
<h1>Introduction</h1>
<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>

你是对的,不要缩进第一段的第一行。为了吸引眼球,使用初始上限(读者人数增加约15%(。

然而,在最佳实践排版中,您应该只使用其中一个:1(段落之间的空格(请注意,不是整个空格(,并且不缩进或者2(段落之间没有空格,但第一行缩进。

* {
margin: 0;
padding: 0;
}
h3 {
font-family: Georgia;
font-size: 1.5rem;
line-height: 1.3rem;
font-weight: normal;
margin: 2.0rem 0;
}
p {
font-family: Georgia;
font-size: 1.0rem;
line-height: 1.3rem;
}
.space-noindent p {
margin-bottom: 0.8rem;
}
.nospace-indent p:nth-child(1n+2) {
text-indent: 1.5rem;
}
.space-noindent p:nth-of-type(1):first-letter{
font-size: 2.5rem;
}
<div class="space-noindent">
<h3>Space, no indent:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
<h3>No space, indent:</h3>
<div class="nospace-indent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>

最新更新