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


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.