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>

Can you show the rendered content that has more than one parapgraph. Also what is the point of the ellipsis if you are going to show more than one paragraph - surely the point is that it is cut off and then you click on the more for further content, you shouldn't cut off the first paragraph then show a second - that means that any context from the first will be lost — Pete, Sep 06 '16 at 14:29
I get why you are confused about only applying it on the first paragraph. The problem was that I was using the p tag to load the content inside, which also contained p tags. At least, that's what I think. I couldn't get the other paragraphs to stay hidden either way so that's why I came up with this kind of crooked "solution" I posted below. — amyvl, Sep 06 '16 at 14:59

Zenel Rrushi · Accepted Answer · 2016-09-06T14:28:49.043

2

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

edited Sep 06 '16 at 14:28

answered Sep 06 '16 at 14:23

Zenel Rrushi

2,346
1
18
34

I tried applying that, but then it doesn't apply to any of the posts. – amyvl Sep 06 '16 at 14:25
@amyvl because the *p* tag isn't the first child of `.newspost` ... and also will not work because you are getting all the content inside one *p* tag not each paragraph of the content on a new tag. – DaniP Sep 06 '16 at 14:28
sorry check the new updated answer. The selector is :first-of-type – Zenel Rrushi Sep 06 '16 at 14:29

score 1 · Answer 2 · answered Sep 06 '16 at 14:31

You can use :first-of-type selector to style first paragraph withing .newspost.

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

<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>

score 1 · Answer 3 · answered Sep 06 '16 at 14:53

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

By applying "p:first-of-type" as suggested by leli.1337 and 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>

... and removing the p tag inside the newspost div, I managed to achieve what I was looking for. The reason I could remove the p tag is because my wordpress posts generate their own paragraphs, so now it only applies to that first one. I also added this to prevent the paragraphs beside the first-of-type from showing:

.newspost p {
    display: none;
}

Thank you for helping, and I hope someone finds this useful in case they come across the same problem. :)

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

3 Answers3