Is it possible to apply text-overflow ellipsis only on the first paragraph?

Question

I am using posts from wordpress and to make every post the same length I am using the CSS code you can see below. This has worked just fine up until now, when I added a post with more than one paragraph in it. When there is more than one paragraph, this code doesn't apply at all and it just shows the complete post. Is there a way to apply this code only to the first paragraph?

I am using the following code:

.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

You can use the :first-of-type css selector to achieve that

.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;
}