MDN의 잘린 텍스트 효과 재현

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

시원하지 않습니까? 더 깊은 분석을하자. 이 접근법이 나에게 호소하는 두 가지 주된 이유가 있습니다.

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

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

 <div> <p> Lorem ipsum dolor sit amet are amet site apisicing elit. </p> <p> 동일, 공상은 없습니다. 우리의 목표는 세 번째 줄 뒤에 컨텐츠를 자르는 것입니다. 우리는 단락의 <code> max-height </code>를 숨길 수 있습니다. </p> <fre>. 공통 승수로 사용할 수있는 <code>-베이스 </code> 변수 사전 설정이 있습니다. 이를 사용하여 글꼴 크기, 선 높이, 카드 채우기 및 이제 단락의 <code> max-height </code>를 계산합니다. 특히 필요한 크기가 이와 같은 척도를 기반으로 할 때 일정한 값을 사용하는 것이 더 쉽습니다. MDN은 아마도 동일한 목적으로 비슷한 <code>-Base-line-Height </code> 변수를 사용한다는 것을 알았습니다.  <p> 세 번째 텍스트 라인을 페이드하는 방법은 무엇입니까? 이것은 단락 <code> :: after </code>의 의사 요소에 대한 고전적인 <code> linear-gradient () </code>이며, 이는 카드의 오른쪽 하단에 고정되어 있습니다. 따라서 우리는 다음과 같이 설정할 수 있습니다. </p> <fre>.  변수. <code> .card </code> 자체가 사용하는 배경색과 동일한 배경색 값으로 설정됩니다. 이렇게하면 텍스트가 배경으로 희미 해 보입니다. 그라디언트가 100%로 혼합 될 때 텍스트가 완전히 숨겨져 있지 않기 때문에 그라디언트의 두 번째 색상 스톱 포인트를 조정해야한다는 것을 알았습니다. 나는 80%가 나에게 좋은 지적이라는 것을 알았다.  <p> 예, <code> :: 이후 </code>는 높이와 너비가 필요합니다. 높이는 <code>-Base </code> 변수가 다시 작동하는 곳입니다. 단락의 선 높이를 <code> :: 이후 </code>의 높이로 덮어 쓰기 위해 단락의 선 높이를 스케일링하기를 원하기 때문입니다. </p> <fre>. 다시 말하지만, <code> top </code> (또는 <code> inset-block-start </code>)를 사용하여 그 방향으로 그라디언트를 상쇄하지 않습니다. ? p 대담추  <p> 이제 <code> p :: 이후 </code>가 절대적으로 배치되었으며, <code> :: 이후 스트림에 <code> :: 이후에 상대적 위치를 명시 적으로 선언해야합니다. 그렇지 않으면, <code> :: after </code>가 문서 스트림에서 완전히 제거되어 결국 카드 외부에 나타납니다. 이것은 <code> .card </code> 단락 : </code></code></p> <fre>. 아니요! 그라디언트는 올바른 장소에 있지 않은 것 같습니다.  <p> 나는 이것에서 실수를 저지른 것을 인정하고 MDN에서 DevTools를 시작하여 내가 놓친 것을보기 시작했습니다. 아, 그렇습니다. <code> :: 후 </code>는 블록 요소로 표시해야합니다. 빨간색 테두리를 추가 할 때 매우 분명합니다. ? </p> <p> 예, 음성은 전문을 존중하는 것 같습니다. 그래도 다른 스크린 리더를 테스트하지 않았습니다. </p> <p> 나는 또한 MDN의 구현이 <code> p :: 이후의 <code> pointer-Events </code>를 제거한다는 것을 알았습니다. 이것은 텍스트를 선택할 때 이상한 행동을 방지하기위한 좋은 방어 전략 일 수 있습니다. 나는 그것을 추가했고, 적어도 Safari, Firefox 및 Chrome에서 텍스트 선택은 조금 더 부드럽습니다. </code></p></fre></fre></fre></fre>
</div>

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