javascript - 为什么当我点击打印按钮时@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

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