Question

我正在使用wordpress中的帖子并使每个帖子的长度相同，我使用的CSS代码如下所示。到目前为止，当我添加一个包含多个段落的帖子时，这已经很好了。如果有多个段落，则此代码根本不适用，只显示完整的帖子。有没有办法将此代码仅应用于第一段？

我使用以下代码：

.newspost p {
    display: block;
    display: -webkit-box;
    line-height: 18px;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="newspost">
  <h2><?php echo get_the_title(); ?> </h2>
  <p>
    <?php the_content(); ?>
  </p>
  <div class="read-more">
    <a href="<?php echo    get_preview_post_link(); ?>">lees meer</a> 
  </div>
</div>

Answer 1

您可以使用：first-of-type css选择器来实现

.newspost p:first-of-type {
    display: block;
    display: -webkit-box;
    line-height: 18px;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

您可以使用:first-of-type选择器设置带有.newspost的第一段。

＆＃13;

.newspost p:first-of-type {
  display: block;
  display: -webkit-box;
  line-height: 18px;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<div class="newspost">
  <h2>Heading</h2>
  <p>
    Lorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet
  </p>
  <p>
    Lorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site ametLorem ipsum dolor site amet, Lorem ipsum dolor site amet , Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet, Lorem ipsum dolor site amet
  </p>
  <div class="read-more">
    <a href="#">lees meer</a> 
  </div>
</div>

＆＃13;

Answer 3

.newspost p:first-of-type {
    display: block;
    display: -webkit-box;
    line-height: 18px;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

通过应用＆＃34; p：first-of-type＆＃34;正如leli.1337和Muhammed Usman所建议的......

<div class="newspost">

   <h2><?php echo get_the_title(); ?> </h2>

   <?php the_content(); ?>

   <div class="read-more">
     <a href="<?php echo    get_preview_post_link(); ?>">lees meer</a> 
   </div>

</div>

...并删除了newspost div中的p标签，我设法实现了我想要的。我可以删除p标签的原因是因为我的wordpress帖子生成了他们自己的段落，所以现在它只适用于第一个。我还添加了这个以防止第一个类型旁边的段落显示：

.newspost p {
    display: none;
}

感谢您的帮助，我希望有人发现这有用，以防他们遇到同样的问题。：）

是否可以仅对第一段应用文本溢出省略号？

3 个答案: