>source

Safari 브라우저에서 라인 클램프의 디스플레이에 2 가지 문제가 있습니다. 우선 모든 code 니펫 :

.clamp-3-lines{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  -webkit-box-pack: end;
}
div{
  border: 1px solid black;
  max-width: 30ch;
  p:nth-child(2){
    color: red;
  }
}

<div class="clamp-3-lines">  

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi unde tempore. Impedit reiciendis est nobis aperiam nulla, pariatur asperiores fugiat id. Quam cum non, eum debitis ab officia quaerat!

</div>

크롬에서 모든 것이 문제없이 표시됩니다. 그러나 Safari (Mac)에서는 마지막 줄이 잘립니다. 그리고 여러 단락이있는 경우 두 번째 단락은 절대적으로 배치 된 것처럼 첫 번째 단락을 나타냅니다. 단락 요소의 기본 여백을 제거하여 첫 번째 오류를 수정할 수 있었지만 원하는 것은 아닙니다. 불행하게도, 텍스트가 WYSIWYG 편집기를 통해 WordPress 백엔드에서 오기 때문에 단락에 대해 아무 것도 할 수 없습니다.

이 사이트를 확인하십시오. caniuse.com/?search=line-clamp. 라인 클램프 지원되지 않음 Safari 3.1 버전, 2008-2009 출시

Elvin Mammadov2021-09-16 14:40:13

그것은 확실히 v15 이후의 브라우저입니다

Denis Cakmak2021-09-16 14:54:21
  • 이전 c# : 언제 좋은 연습을 거친가요?
  • 다음 html : 왜 내

    태그에서 렌더링 된 공간이 아닌가?