是否可以僅在第一段應用文本溢出省略號？

-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

是否可以僅在第一段應用文本溢出省略號？

回答

相關問題