break-inside

예제

기본 예제

break-inside-column과 break-inside-avoid-page 같은 유틸리티를 사용해 엘리먼트 내에서 컬럼이나 페이지가 어떻게 나뉠지 제어할 수 있습니다:

<div class="columns-2">  <p>자, 내가 뭐라고 말할까요...</p>  <p class="break-inside-avoid-column">물론, 웃으세요...</p>  <p>어쩌면 우리는 없이도 살 수 있을지도...</p>  <p>보세요. 만약 당신이 이걸...</p></div>

반응형 디자인

접두사 a break-inside 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="break-inside-avoid-column md:break-inside-auto ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.