When I click the print button, the text is supposed to display in four columns in the print dialog, but it appears as paragraphs instead.
This is my script code where there is a click event for the print button.
When I click on it, the print dialog pops up but the text that should
be displayed in four columns appears as 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's name is Jonney. My dog's name is Jonney. My dog's name is Jonney.
My dog's name is Jonney. My dog's name is Jonney. My dog's name is Jonney.
My dog's name is Jonney. My dog's name is Jonney. My dog's name is Jonney. My dog's name is Jonney.
</div>