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

-1

我正在使用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>

来源

2016-09-06 amyvl

您可以显示具有多个parapgraph的呈现内容。如果您要显示多个段落，那么省略号的重点是什么 - 当然重点在于它被切断，然后您点击更多的内容以获取更多内容，您不应该切断第一段然后显示第二个 - 这意味着从第一个任何上下文将丢失 – Pete

我得到为什么你只是将其应用于第一段感到困惑。问题是我使用p标签来加载里面的内容，其中也包含p标签。至少，这是我的想法。我无法让其他段落保持隐藏，这就是为什么我想出了我在下面发布的这种歪曲的“解决方案”。 – amyvl

如果有的话标记正确的答案。 –

您可以使用：首个类型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; 
}

来源

2016-09-06 14:23:14

我尝试过申请，但不适用于任何帖子。 – amyvl

@amyvl，因为* p *标记不是'.newspost'的第一个孩子...并且也不起作用，因为您正在获取一个* p *标记内的所有内容，而不是新内容上的每个段落标签。 – DaniP

对不起，请检查新的更新答案。选择器是：一类 –

您可以使用:first-of-type选择样式第一段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>

来源

2016-09-06 14:31:23

@amyvl欢迎您） –

.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建议和穆罕默德奥斯曼...

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

谢谢你的帮助，我希望有人认为这有用的情况下，他们遇到了同样的问题。 :)

来源

2016-09-06 14:53:16 amyvl

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

回答

相关问题