MDN의 잘린 텍스트 효과 재현

3 월에 시작된 MDN의 새로운 디자인은 훌륭합니다! 이러한 영리한 CSS 트릭 중 일부는 카드 구성 요소가 잘린 텍스트를 처리하는 방식과 같이 맛볼 가치가 있습니다.

시원하지 않습니까? 더 깊은 분석을하자. 이 방법이 저를 끌어들이는 두 가지 주된 이유가 있습니다.

• CSS 데이터 손실로 알려진 콘텐츠를 영리하게 자릅니다. 데이터 손실은 일반적으로 나쁘지만 요약은 전체 컨텐츠의 미리보기이기 때문에 바로 여기에서 사용됩니다.
• 이것은 text-overflow: ellipsis 시스는 텍스트를 자르기 위해 텍스트를 잘라 냈습니다. 주요 반대 의견은 잘린 텍스트를 복구 할 수 없다는 것입니다. 보조 기술은 읽을 수 있지만 정상적인 비전을 가진 사용자는이를 복구 할 수 없습니다. 잘린 MDN 방법은 잘린 제어를 제공합니다. 절단은 시각적이기 때문에 더 많은 제어를 제공합니다.

MDN은 어떻게합니까? HTML에는 특별한 것이 없습니다. 단락이 포함 된 컨테이너 일뿐입니다.

<div>
  <p>Lorem ipsum dolor sit amet consectetur apisicing elit.</p>
</div>

우리는 그것을 완벽하게하기 위해 몇 가지 기본 스타일을 추가 할 수 있습니다.

다시 한번, 공상은 없습니다. 우리의 목표는 세 번째 줄 뒤에 컨텐츠를 자르는 것입니다. 단락의 max-height 설정하고 오버플로를 숨길 수 있습니다.

 .card p {
  Max-Height : calc (4rem* var (-base));
  오버플로 : 숨겨진; /* 컨텐츠를 잘라냅니다.
}

잠깐, calc() 란? 공통 승수로 사용할 수있는 --base 변수 사전 설정이 있습니다. 글꼴 크기, 선 높이, 카드 충전 및 이제 max-height 의 단락을 계산하는 데 사용합니다. 특히 필요한 크기가 이와 같은 척도를 기반으로 할 때 일정한 값을 사용하는 것이 더 쉽습니다. MDN은 아마도 같은 목적을 위해 비슷한 --base-line-height 변수를 사용한다는 것을 알았습니다.

세 번째 텍스트 라인이 사라지는 방법? 이것은 단락 ::after 고전적인 linear-gradient() 입니다. 따라서 다음과 같이 설정할 수 있습니다.

 .card p :: 이후 {
  내용 : ""; /* pseudo elements* /
  배경 이미지 : 선형 그레이드 (오른쪽, 투명, var (-배경) 80%);
  위치 : 절대;
  삽입 된 라인 엔드 : 0; 오른쪽 : 0`* /
}

.card 자체가 사용하는 배경색과 동일한 배경색 값으로 설정된 --background 변수라고 불렀습니다. 이렇게하면 텍스트가 배경으로 희미 해 보입니다. 그라디언트가 100%로 혼합 될 때 텍스트가 완전히 숨겨져 있지 않기 때문에 그라디언트의 두 번째 색상 스톱 포인트를 조정해야한다는 것을 알았습니다. 나는 80%가 나에게 좋은 지적이라는 것을 알았다.

예, ::after 높이와 너비가 필요합니다. 높이는 --base 변수가 다시 작동하는 곳입니다. 우리는 단락의 선 높이를 조정하여 ::after 의 높이로 텍스트를 다루기를 원하기 때문입니다.

 .card p :: 이후 {
  /* 위와 동일*/
  높이 : calc (1REM * var (-베이스) 1px);
  너비 : 100%; /* .card 컨테이너에 대해* /
}

여분의 픽셀 높이를 추가하면 문제가 해결되는 것처럼 보이지만 DevTools를 볼 때 MDN은 그 일없이 할 수 있습니다. 다시 말하지만, 나는 top (또는 inset-block-start )을 사용하여 그 구배를 해당 방향으로 상쇄하지 않습니다. ? ‍ ♂️

이제 p::after 절대적으로 위치되기 때문에, 우리는 단락에서 상대적 위치를 명시 적으로 선언하여 ::after 같은 스트림에서 유지해야합니다. 그렇지 않으면, ::after 문서 스트림에서 완전히 제거되고 결국 카드 외부에 나타납니다. 이것은 .card 단락의 전체 CSS입니다.

 .card p {
  Max-Height : calc (4rem* var (-base));
  오버플로 : 숨겨진; /* 컨텐츠를 잘라냅니다.
  위치 : 상대적; /* :: 필요한 후* /
}

우리는 끝났어? 아니요! 그라디언트는 올바른 장소에 있지 않은 것 같습니다.

나는 이것에 실수를했다고 인정하고 MDN에서 DevTools를 시작하여 내가 놓친 것을보기 시작했다. 아, 그렇습니다. ::after 블록 요소로 표시해야합니다. 빨간색 테두리를 추가 할 때 매우 분명합니다. ? ‍ ♂️

 .card p :: 이후 {
  콘텐츠: "";
  배경 : 선형 등급 (오른쪽, 투명, var (-배경) 80%);
  디스플레이 : 블록;
  높이 : calc (1REM * var (-베이스) 1px);
  삽입 블록 엔드 : 0;
  위치 : 절대;
  너비 : 100%;
}

이제 모든 것을 합치십시오!

예, Voiceover는 전체 텍스트를 존중하는 것 같습니다. 그래도 다른 스크린 리더를 테스트하지 않았습니다.

또한 MDN의 구현은 p::after 에서 pointer-events 제거한다는 것을 알았습니다. 이것은 텍스트를 선택할 때 이상한 행동을 방지하기위한 좋은 방어 전략 일 수 있습니다. 나는 그것을 추가했고, 적어도 Safari, Firefox 및 Chrome에서 텍스트 선택은 조금 더 부드럽습니다.

위 내용은 MDN의 잘린 텍스트 효과 재현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!