why selector of @media print is not displaying correct format when i click print button?

Question

when i click print button, text is suppose to show in four column in print dialog but it shows as a paragraphs as i wrote it.

 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头