テキストオーバーフローの省略記号を最初の段落にのみ適用できますか？

Question

私はwordpressからの投稿を使用しています。また、すべての投稿を同じ長さにするために、私はあなたが以下に見ることができるCSSコードを使用しています。これは今まではうまくいきました。投稿に1つ以上の段落が追加された時点です。複数の段落がある場合、このコードはまったく適用されず、完全なポストしか表示されません。このコードを最初の段落にのみ適用する方法はありますか？

私は次のコードを使用しています：あなたが最初の段落のwithingのスタイルを:first-of-typeセレクタを使用することができます

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

を.newspost。 "P：第一の型" を適用することにより

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

ことを達成するための第一の型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> 

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モハメドウスマンによって示唆されているように...

<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タグを削除する理由は、私のワードプレスの投稿が独自の段落を生成するためです。そのため、最初のものにのみ適用されます。私はまた、表示から第一のタイプの横に段落を防ぐために、これを追加しました：

.newspost p { 
    display: none; 
} 

ご協力いただきありがとうございます、と私は誰かが、彼らは同じ問題に遭遇した場合に、これは重宝願っています。 :)