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

Question

我正在使用来自 wordpress 的 posts 并使每个 post 的长度相同我正在使用 CSS 代码，您可以在下面看到。直到现在，当我添加一个包含多个段落的 post 时，它一直运行良好。当有多个段落时，此代码根本不适用，它只显示完整的 post。有没有办法只将此代码应用于第一段？

我正在使用以下代码：

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

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

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

按照 leli.1337 和 Muhammed Usman 的建议应用 "p:first-of-type"...

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

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

.newspost p {
    display: none;
}

感谢您的帮助，我希望有人在遇到相同问题时发现这很有用。 :)

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

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

css

paragraph

ellipsis