첫 번째 단락에만 텍스트 오버플로 줄임표를 적용 할 수 있습니까?

Question

나는 wordpress에서 게시물을 사용하고 있으며 모든 게시물을 아래 보이는 CSS 코드를 사용하여 같은 길이로 만들고 있습니다. 지금까지 단 한 번 이상 단락이있는 게시물을 추가했을 때이 작업은 정상적으로 진행되었습니다. 두 개 이상의 단락이있을 때이 코드는 전혀 적용되지 않으며 전체 게시물 만 표시됩니다. 첫 번째 단락에만이 코드를 적용 할 수 있습니까? 첫 번째 단락의 withing에 스타일을

.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. 적용함으로써

.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

당신은 :first-of-type 선택기를 사용할 수 있음을 달성하기 위해 최초의 형 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; 
} 

이 "P : 첫 형"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; 
} 

이 도움을 주셔서 감사합니다, 나는 누군가가 같은 문제가 건너 경우이 유용한 발견 바란다 : 나는 또한이 제 1의 형 보여주는에서 옆에있는 단락을 방지하기 위해 추가. :)