2010-04-15 3 views
53

인쇄 스타일 시트를 작성할 때 여러 페이지에 걸쳐 있지 않고 이미지가 항상 한 페이지에만 있도록하는 방법이 있습니까? 이미지는 페이지보다 훨씬 작지만 문서 흐름을 기반으로 페이지의 맨 아래에서 끝나고 분할됩니다.인쇄 스타일 : 이미지가 페이지 넘김을 방지하지 않는 방법

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  | | 
     | |    | | 
     | |________________| | 
     |   …   | 

에게 내가 라텍스 수레에 대해 불평 그 모든 시간을 좋아하는 것, 여기에 나는 같은 기능을 요구하고있다 : 제가 보는 행동의 예는 다음과 같습니다 ... 할 수 있을까요? 필자는 모든 브라우저에서 작동하는 것에 대해 걱정할 필요가 없습니다. PDF로 변환하기 위해 작성한 일회용 문서이기 때문에 모든 브라우저에서 작동하지 않을 수도 있습니다. 왜 이렇게 (이 선언은 블록 레벨에 요소를 적용하는 것이

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' */ 
} 

내가 반 리콜 :

+19

ASCII 아트 다이어그램을 유용하게 사용하는 Upvote :) – NickG

+0

@NickG 많이 동의 한 ASCII 다이어그램! –

답변

41

단지 내가 다음과 같은 CSS 규칙 중 하나 (또는 ​​잠재적으로 더)를 사용하는 것입니다 생각할 수있는 의미 이미지에 display: block;을 정의하거나 포장 컨테이너를 사용하여 규칙을 적용해야합니다 (단락, div, 범위, 목록 등 ...)

유용한 토론 여기에 : "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

참조 :

+3

그래,이 작동합니다. ('page-break-inside : avoid'). 이제 LaTeX 수레가 왜 고통 스러울 지 생각 나게합니다. – notJim

+0

@notJim 만 수레? – Mindwin

+0

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