CSS - 멀티 라인 라인 클램프 (생략)은 내가 H3 태그에이 클래스를 적용

Question

problem image

작동하지 않습니다.

.ellipsis-2 { 
    $lines: 2; 
    $line-multiple: 1.3; 
    $font-size: 1em; 
    display: block; 
    display: -webkit-box; 
    max-height: $font-size * $line-multiple * $lines; 
    line-height: $font-size * $line-multiple; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    word-wrap: break-word; 
    -webkit-line-clamp: $lines; 
    -webkit-box-orient: vertical; 
} 

이미지에서 보았던 것처럼 전체 줄의 텍스트가 있으며 줄임표가 표시되지 않았습니다.

그러나 화면의 크기를 조정할 때 줄임표가 올바르게 작동합니다.

첫 페이지 렌더링시에만 문제가 발생했습니다.

아무거나?

Answer 1

거의 1 년이 지난 게시물이지만 여전히 답변으로 누군가에게 도움이 될 수 있습니다.

-webkit-line-clamp의 요소가 직접 렌더링되거나 부모 중 하나에서 상속하여 렌더링 될 때 표시 여부가 숨김으로 설정된 경우 이러한 현상이 발생할 수 있습니다. 이것은이 웹킷 버그로 인한 것입니다 : -webkit-line-clamp is not respected when visibility is hidden.

가능한 경우 가시성 대신 display: none을 설정할 수 있습니다.