처음 두 단락을 제외한 긴 텍스트 숨기기

매우 긴 텍스트가 있고 처음 두 단락을 제외한 모든 것을 숨길 필요가 있습니다. 다양한 이유로 jquery를이 사이트에 사용하지 않을 것입니다. 이것을 CSS로만 할 수 있습니까? nth-child가 가장 잘 할 것이라고 알고 있지만 특정 규칙을 따르는 데 문제가 있습니다.처음 두 단락을 제외한 긴 텍스트 숨기기

<div class="text"> 
<p>display</p> 
<p>display</p> 
<p>hide from this point</p> 
<p>...</p> 
</div>

출처

2012-03-31 Barbara

일부 이벤트가 끝나면 텍스트를 표시 하시겠습니까? 그 텍스트가 전혀 존재하지 않아도 되는가? 나는 그 텍스트가 보이지 않을지라도 그 텍스트가 왜 페이지에 남아 있어야하는지에 달려 있다고 생각한다. – biggles

'nth-child'는 분명한 해결 방법이지만, 새로운 브라우저에서만 지원됩니다 (http://caniuse.com/#search=nth-child 참조). – kopischke

@kopischke 나는 그것을 알고 있지만 나는 나의 통계를 보았고 대부분의 내 방문객들은 크롬이나 파이어 폭스를 사용하고있다. 일부 IE9, 유일한 문제는 IE8과 관련된 것입니다. 나는 그들에 대한 해결 방법을 찾거나 jquery를 사용해야한다. – Barbara

이 코드는 당신이 원하는 결과를 줄 것이다 :

div.text > p:nth-child(n+3){ 
    display:none; 
}

출처

2012-03-31 17:29:00 Engineer

예 이것은 CSS

  div p:nth-child(3){ } 
     div p:nth-child(4){ } 
     div p:nth-child(5){ }

와 이것이 당신이 찾고있는 무엇을 할 수 있는가?

출처

2012-03-31 17:23:02 AgnosticDev

사용

.text p { 
    display:none; 
} 

.text p:nth-child(-n+3) { 
    display:block; 
}

위의 두 번째 이후 어떤 단락을 숨 깁니다. CSS nth-child here에 대한 자세한 정보.

출처

2012-03-31 17:25:55 cplusplus

(IE7 +와 OK RESP 인접 일반 형제 선택자.) + 또는 ~ 선택기를 사용하는 것보다 호환 방법 :

.text p ~ p ~ p { 
    display: none; 
}

을

특정 문단 만있는 인 경우 +도 사용할 수 있습니다. 소문자, 소문자 또는 두 단락 사이의 무엇이든 목록이있는 경우 ~은 해당 비 -p 요소 뒤에 오는 단락과 일치합니다.
처음 두 단락 앞에 두 단락이 없으므로 선택자 규칙과 일치하지 않으며 계속 표시됩니다. 다음 항목은 모두 적어도 두 단락 앞에 있으므로 숨겨집니다.

편집 : : nth-child()는 완벽하게 유효한 답변이지만 IE8에서는 작동하지 않습니다.

출처

2012-03-31 17:30:16 FelipeAls

감사합니다. 이렇게하면 나이가 많은 IE 브라우저에서도 n 번째 자식이 작동합니다. 아직 테스트하지 않았지만 참조 용으로 게시하고 있습니다. http://selectivizr.com/ http://caniuse.com/#search=nth-child – Barbara

단점 :이 유형의 스크립트는 이미 가장 느린 브라우저 인 JS를 실행하는 경우에만 느리게 동작하는 브라우저를 사용합니다. 그러나 테스트를 거친 후에도 여전히 필요 사항을 충족하면 잘 작동합니다. – FelipeAls

나는 통계를보고 있지만 내 방문자 중 작은 비율 일뿐입니다. 그들 중 9 명이 여전히 IE6를 사용하고 있다고 믿을 수는 없습니다. 어쨌든 최악의 시나리오는 텍스트의 긴 단락을 살펴볼 것입니다. – Barbara

처음 두 단락을 제외한 긴 텍스트 숨기기

답변

관련 문제