Tailwind에서 'overflow-hidden' 및 'overflow-visible'을 사용하는 방법은 무엇입니까?

컨테이너에 대한 유틸리티:

< 몸 >

< 사업부 수업 = '오버플로우-숨김 bg-purple-300 p-4 mx-16 mt-5 h-32 텍스트 정당화' >
Tailwind CSS는 다양한 '과다' 다음과 같은 유틸리티 '오버플로 자동' , '오버플로 스크롤' , '오버플로 숨김' ,
'오버플로 표시' 등. 이러한 유틸리티는 특정 요소가 콘텐츠 초과하는
컨테이너 크기 . 각 유틸리티는 고유한 기능을 제공하지만 최종 목표는 동일하게 유지됩니다.
의 오버플로 동작 선택된 요소.
< / 사업부 >

< / 몸 >

여기:

---

---

• '오버플로 숨겨진' 클래스는
  컨테이너의 크기를 초과하는 콘텐츠를 숨기는 데 사용됩니다.
• 'bg-퍼플-300' 클래스는 보라색을 컨테이너의 배경으로 설정합니다.
• 'p-4' 클래스는 컨테이너의 모든 면에 4단위의 패딩을 설정합니다.
• 'mx-16' 클래스는 컨테이너의 x축에 16단위의 여백을 적용합니다.
• 'mt-5' 클래스는 컨테이너 상단에 5단위의 여백을 적용합니다.
• 'h-32' 클래스는 컨테이너의 높이를 32 단위로 설정합니다.
• '텍스트 정렬' 클래스는 컨테이너 내부 콘텐츠의 텍스트를 정당화합니다.

산출

위의 출력에서 ​​'overflow-hidden' 속성이 성공적으로 적용되었음을 나타내는 오버플로 콘텐츠를 볼 수 없습니다.

Tailwind에서 'overflow-visible'을 사용하는 방법은 무엇입니까?

그만큼 '오버플로 표시' 클래스를 사용하면 초과하는 콘텐츠를 볼 수 있습니다. Tailwind에서 'overflow-visible'을 활용하려면 HTML 구조를 만들고 'overflow-visible' 유틸리티 클래스를 특정 요소와 함께 적용합니다.

통사론

<요소 수업 = '오버플로 표시 ...' >...< / 요소>

예
이 예에서는 다음을 적용합니다. '오버플로 표시' 오버플로 콘텐츠를 표시하는