인쇄 문제: 페이지 간 DIV 분기 방지

동적 DIV가 페이지 간에 절반으로 잘리는 인쇄 딜레마에 직면하셨나요? 이 문제는 가변 높이의 수많은 DIV 요소가 포함된 긴 문서를 인쇄하려고 할 때 발생합니다.

CSS 구조 솔루션

이 문제를 해결하려면 CSS 속성 break- 내부가 구출됩니다. 회피 값을 지정하면 렌더링 엔진이 DIV가 중간에 분할되는 것을 방지할 수 있습니다. 코드 조각은 다음과 같습니다.

@media print {
  div {
    break-inside: avoid;
  }
}

이 솔루션은 다음을 포함한 모든 주요 브라우저에서 지원됩니다.

• Chrome 50
• Edge 12
• Firefox 65
• Opera 37
• Safari 10

대체 옵션

또 다른 실행 가능한 옵션은 페이지 나누기 내부를 사용하는 것입니다. 침입 대신: 피하기;. 그러나 이 접근 방식은 더 이상 사용되지 않으므로 주의해서 사용해야 합니다.