为什么当我单击打印按钮时@media print 的选择器没有显示正确的格式？

Question

当我点击打印按钮时，文本应该显示在打印对话框的四列中，但它显示为我写的段落。

This are my script code where there is click event of print button. 
when i click it print dialog popup but the text which it suppose to 
show in four column shows it as a paragraphs.

 <script>

    $(document).ready(function () {

        $(document.body).on('click', '#btnPrint', function () {
         
         
            window.print();
           
            
           
        });
    });


</script>

my css code.



@media print {
   
 .FourColumnClass
    {
    -webkit-column-count: 4; 
    -moz-column-count: 4;
    column-count: 4;

    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px;
    column-gap: 40px;
    }

}

my html code.

<div class="clsbtn">
    <button type="button" id="btnPrint">Print</button>
</div>

<div class="FourColumnClass">
  my dog name is jonney. my dog name is jonney. my dog name is jonney.
  my dog name is jonney. my dog name is jonney. my dog name is jonney. 
  my dog name is jonney. my dog name is jonney. my dog name is jonney. my   dog name is jonney.
</div>

Answer 1

在您的<link rel="stylesheet" type="text/css" href="mystyle.css" media="print"> html 头部添加media="print"