인쇄 스타일 : 이미지가 페이지 나누기에 걸쳐 있지 않은지 확인하는 방법


95

인쇄 스타일 시트를 작성할 때 이미지가 여러 페이지에 걸쳐있는 대신 항상 단일 페이지에만 있도록하는 방법이 있습니까? 이미지는 페이지보다 훨씬 작지만 문서 흐름에 따라 페이지 하단에서 끝나고 분할됩니다. 내가보고있는 동작의 예는 다음과 같습니다.

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

내가 원하는 것

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

그동안 나는 LaTeX의 수레에 대해 불평했고, 여기에서 동일한 기능을 요구하고 있습니다.이 작업을 수행 할 수 있습니까? 모든 브라우저에서 작동하는 것에 대해 반드시 염려하지는 않습니다.이 문서는 PDF로 변환하기 위해 작성하는 일회성 문서 인 경우가 많습니다.


45
ASCII 아트 다이어그램을 많이 사용하도록
— 찬성 투표

@NickG 많은 동의, 정말 멋진 ASCII 다이어그램!

답변:


66

내가 생각할 수있는 유일한 방법은 다음 CSS 규칙 중 하나 (또는 ​​잠재적으로 그 이상)를 사용하는 것입니다.

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

이러한 선언은 블록 수준 요소에만 적용된다는 점을 반쯤 display: block;상기합니다. , 목록 등 ...).

여기에 몇 가지 유용한 토론이 있습니다. " 가장media="print" 유용한 특정 브라우저 간 호환 CSS 속성은 무엇입니까? "

참조 :


3
네, 작동합니다. ( page-break-inside:avoid). 이제 LaTeX 플로트가 왜 고통 스러운지 생각 나게되었습니다.
— davidtbernal

2
@notJim 수레 만?
— Mindwin

설명은 매우 논리적이지만 어떤 이유로 Firefox 54의 HTML5 파일에서는 작동하지 않습니다. Internet Explorer 11에서 작동하므로 버그 일 수 있습니다.
— Wolf

페이지 나누기 내부-CSS | MDN은 이 결함 전용 페이지입니다)
— 늑대

@Wolf 페이지가 변경 되었습니까? 아니면 내가 뭔가를 놓치고 있습니까? FF54가있는 HTML5에서이 기능이 작동하지 않는 이유는 무엇입니까?
— The Oddler jul.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.