CSS for printing - How to control data flow

Asked

Viewed 77 times

0

Good afternoon! I’m setting up a layout for printing, where there will be a lot of data that exceeds more than one page.

Does anyone know how to control the amount of data per page not to cut the data at the end of the document?

The idea of printing is to be held in window.print() in an independent html. Currently I tried with css, like this:

@page{
    size: A4;
    margin: 5mm 6mm 2mm 6mm;
    page-break-after: always;
}

But when you get to the bottom of the page, you keep cutting the data and going to the next page... I would like to be able to control so that the page break happened before you cut.

In the layout I have html in this idea:

    <meta charset="utf8">

<style>
body{
    text-align:center;
    background-color:#e8e8e8;
}
@page{
    size: A4;
    margin: 5mm 6mm 2mm 6mm;
    page-break-after: always;
}
.box_container{
    display:inline-block;
    text-align:left;
    width: 793px;
    height: 1122px; 
}
.box{
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    border-bottom:1px solid #e8e8e8;
    background-color:#FFFFFF;
}
.box li{
    display:inline-block;
    width:99%;
    padding:0 0 0 1%;
}
.box_title{
    display:inline-block;
    width:100%;
    border-bottom:1px solid #000000;
    padding:20px 0 20px 0;
    text-align:center;
    background-color:#FFFFFF;
}
</style>

<div class='box_container'> 

  <div class='box_title'>Título</div>

  <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>


   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>

   <div class='box'>
    <li>Rótulo: 1</li>
    <li>Rótulo: 2</li>
    <li>Rótulo: 3</li>
    <li>Rótulo: 4</li>
    <li>Rótulo: 5</li>
    <li>Rótulo: 6</li>
  </div>





</div><!-- /box_container -->  

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

  <script>
    $(".box_container").click(function(){
        window.print();
    });//end click
  </script>

When the page is finishing and the result is 4 for example, currently it is 4 on one page and 5.6 on the other. The right thing would be to skip the whole block, from 1 to 6 to the next page... someone would know how?

I’ll put an image here to demonstrate what happens: https://imgur.com/iUI3ulT img demonstração

html css print

  • I think this will give you a Light! https://answall.com/questions/373300/pagina-para-imprimir-1-ou-2-colunas-html/387913#387913

  • I tried to box that css: -Webkit-print-color-Adjust: Exact; column-Fill: balance; column-Count: 2; -Webkit-column-break-Inside: avoid; page-break-Inside: avoid; break-Inside: avoid;

  • it creates columns otherwise, etc... but in the limitations of the page did not resolve, continue the cutting msmo at the end...

  • Man these days I must be without PC, but as soon as I can do some tests, if you can edit your answer with part of your real content, and talk where this cutting, so it’s easier for us to simulate your problem

  • Good morning! I added an image demonstrating what happens.

  • I edited the question with the html/css code that can be tested and visualized that occurs;

  • Now that I’ve had a while pr see this, but I think it will solve your problem, after a look at the answer, your code had some details, but now it’s working!

Show 2 more comments

1 answer

1


Your code had some little problems, like limit a height pro box_container with a height and put in it display:inline-block. Taking away this property and putting the properties below I managed to control the breaking of the content blocks.

        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;

Notice in this image how no block of content breaks, always the item 6 is at the bottom of the page.

inserir a descrição da imagem aqui

Follow the image code above.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			text-align: center;
			background-color: #e8e8e8;
		}

		.box_container {
			/* display: inline-block; */
			text-align: left;
			width: 793px;
			/* height: 1122px; */
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
			margin: 0 auto;

		}

		.box {
			display: inline-block;
			width: 100%;
			padding: 10px 0 10px 0;
			border-bottom: 1px solid #e8e8e8;
			background-color: #FFFFFF;


		}

		.box li {
			display: inline-block;
			width: 99%;
			padding: 0 0 0 1%;
		}

		.box_title {
			display: inline-block;
			width: 100%;
			border-bottom: 1px solid #000000;
			padding: 20px 0 20px 0;
			text-align: center;
			background-color: #FFFFFF;
		}

		@media print {
			@page {
				size: A4;
				margin: 5mm 6mm 2mm 6mm;
				page-break-after: always;
			}
		}
	</style>
</head>

<body>
	<div class='box_container'>

		<div class='box_title'>Título</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, quos quas impedit temporibus ea tempore
			dicta ratione totam odit nulla voluptatem pariatur. Accusantium cum impedit vitae excepturi voluptate, amet
			ea.
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas porro modi aliquam debitis,
			beatae quo aspernatur corrupti, accusamus recusandae veritatis quae suscipit quidem consequuntur sint
			voluptas rerum veniam architecto vitae.
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>

		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>

		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>
		<div class='box'>
			<li>Rótulo: 1</li>
			<li>Rótulo: 2</li>
			<li>Rótulo: 3</li>
			<li>Rótulo: 4</li>
			<li>Rótulo: 5</li>
			<li>Rótulo: 6</li>
		</div>






	</div><!-- /box_container -->

	<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

	<script>
		$(".box_container").click(function () {
			window.print();
		}); //end click
	</script>


</body>

</html>

  • Perfect! With this implementation the break occurs correctly at the bottom of the page. Thank you!!!

  • @Neo cool, glad it worked out there []s

Browser other questions tagged html css print

You are not signed in. Login or sign up in order to post.