0

How to set page to A4 size for printer using css ?

This is my code when you test it. You will see word test in 2 A4 paper page.

But when i press Ctrl+p keyboard it's show like this.

enter image description here

why it's not print for 2 page.

    <style type="text/css">
    .A4 {
      background: white;
      width: 21cm;
      height: 29.7cm;
      display: block;
      margin: 0 auto;
      padding: 10px 25px;
      margin-bottom: 0.5cm;
      box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
      overflow-y: scroll;
      box-sizing: border-box;
    }
    
    @media print {
      .page-break {
        display: block;
        page-break-before: always;
      }
    
      size: A4 portrait;
    }
    
    @media print {
      body {
        margin: 0;
        padding: 0;
      }
    
      .A4 {
        box-shadow: none;
        margin: 0;
        width: auto;
        height: auto;
      }
    
      .noprint {
        display: none;
      }
    
      .enable-print {
        display: block;
      }
    }
    </style>
    
    <div class="A4">
    test
    </div>
    
    <div class="A4">
    test
    </div>

How can i do ?

reswe teryuio
  • 117
  • 1
  • 1
  • 8
  • 1
    Because you're dictating `page-break-before` on an element with the class `page-break`, and it does not exist in your DOM. – Terry Nov 12 '18 at 08:52

1 Answers1

0

You have a .page-break class, but you're not using it.

<style type="text/css">
  @media print {
    body {
      margin: 0;
      padding: 0;
    }
    .A4 {
      margin: 0;
      background: white;
      width: 21cm;
      height: 29.7cm;
    }
    .noprint {
      display: none;
    }
    .enable-print {
      display: block;
    }
    .page-break {
      page-break-before: always;
    }
  }
</style>

<div class="A4 enable-print">
  test
</div>

<div class="A4 enable-print page-break">
  test
</div>

<div class="noprint">
  won't be printed
</div>
ksav
  • 20,015
  • 6
  • 46
  • 66
  • for third page i have to use class `A4 page-break` ? – reswe teryuio Nov 12 '18 at 08:57
  • You don't have to. Only use it on each `.A4` page you want to break onto a new page. The 3rd page in my example won't be printed, so it doesn't make sense to use the `.page-break` class. – ksav Nov 12 '18 at 09:04