Как соответствовать простой HTML-странице для печати на принтере TSC TTP-244 Pro (40x60 мм)? ⇐ CSS

[Anonymous]

Я работаю над печати простой HTML-страницы, используя принтер TSC TTP-244 Pro. Размер метки составляет 40 мм x 60 мм. Я уже правильно установил размер страницы в настройке принтера, но когда я печатаю страницу, контент переполняет и распространяется по нескольким меткам (3 страницы) вместо того, чтобы аккуратно вписаться в одну метку. < /P>
Я хочу достичь следующего: < /p>

. Содержимое должно вписаться в 40x. Требуется, что размер шрифта и поля должны автоматически регулировать, чтобы соответствовать метке. < /li>
Не должно быть нежелательных разрывов страниц; Весь контент должен печатать на одной метке. < /li>
Решение должно работать с помощью CSS или HTML -корректировок.


Label Printing

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

@page {
size: 40mm 60mm;
margin: 0;
}

body {
width: 40mm;
height: 60mm;
padding: 0.5mm;
font-size: 4.5px;
line-height: 1;
overflow: hidden;
}

.header {
text-align: center;
margin-bottom: 0.5mm;
font-weight: bold;
}

.company-info {
display: flex;
justify-content: space-between;
margin-bottom: 0.5mm;
}

.company-name {
font-family: 'Monotype Corsiva', cursive;
font-size: 5px;
}

.company-meta {
font-size: 3.5px;
line-height: 1.2;
}

.divider {
border-top: 0.5px solid #000;
margin: 0.5mm 0;
}

.details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3mm;
margin-bottom: 0.5mm;
}

.detail-pair {
display: flex;
white-space: nowrap;
}

.detail-label {
font-weight: bold;
margin-right: 0.5mm;
}

.detail-value {
white-space: normal;
word-break: break-all;
max-width: 18mm;
}

.parts-title {
font-weight: bold;
text-align: center;
margin-bottom: 0.3mm;
font-size: 4.5px;
}

.parts-table {
width: 100%;
border-collapse: collapse;
font-size: 4px;
}

.parts-table th, .parts-table td {
padding: 0.2mm;
border: none;
}

.parts-table td {
word-break: break-all;
max-width: 18mm;
}

.page-break {
page-break-after: always;
}




OUTWARD DETAILS


XXXXXXXXXXXXXXXXXXXX®
ISO 9001:2015 Certified
XXXXXXXXXXXX



Packing Date:
{{ date('d-m-Y H:i', strtotime($boxDetails[0]->package_date)) }}





Party:
{{ $salesRegister[0]->customer_name }}

Inv No:
{{ $salesRegister[0]->document_no }}

Box:
{{ $boxNo }}/{{ $totalBoxes }}

Date:
{{ \Carbon\Carbon::parse($salesRegister[0]->posting_date)->format('d-m-Y') }}

Weight:
{{ $boxDetails[0]->weight }}{{ $boxDetails[0]->parts_nlr_measure }}



Parts Summary



#
INV No.
Description
Qty



@foreach ($salesRegister as $index => $register)
@if ($register->box_no == $boxNo)

*
{{ $register->inv_no }}
{{ $register->search_description }}
{{ $register->qty }}

@endif
@endforeach



@if (!$loop->last)

@endif
@endforeach


window.onload = function() {
setTimeout(function() {
window.print();
setTimeout(function() {
window.close();
}, 100);
}, 200);
};



< /code>
Что я хочу: < /p>

Правильный CSS, чтобы гарантировать, что он печатается в пределах 40 мм x 60 мм без переполнения. < /p>
< /li>
Руководство по лучшим методам разработки веб-страниц для термических или лабрец-пинтеров, таких как TSC TTP-24. /> < /li>
< /ul>
Что я сделал до сих пор: < /p>

Установите размер бумаги принтера на 40x60 мм в настройках принтера. < /p>
< /li>
Попробовано сокращение размера Font Man. /> < /ul>
Контент все еще переполняется следующей меткой. < /p>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -printer-4