Estou tentando montar uma página HTML para imprimir uma etiqueta com 80mm x 40mm. Ela está esta dando certo, porém quando o nome da pessoa é muito grande a etiqueta perde o alinhamento, consumindo 2 etiquetas.
Preciso travar o tamanho da div
, e se o texto for maior ele tem que ser resumido e não alterar o tamanho da mesma.
Exemplo do código funcionando:
<div style="page-break-inside: avoid; width: 80mm; height: 40mm; background: #ccc;">
<!-- Nome Cliente -->
<div style="page-break-inside: avoid;">
<b>RAFAEL VILELA</b>
</div>
<!-- Endereço -->
<div style="text-align: left; font-size: 10px;">
BOA ESPERANÇA - MG<br> RUA SÃO TIAGO - 298
</div>
<!-- Volumes -->
<div style="height: 15mm; text-align: center; line-height: 15mm; font-size: 18px;">
<b>Vol.: 1 / 3</b>
</div>
<!-- Nome Cliente -->
<div style="text-align: left; font-size: 8px;">
CON. JOÃO ALGUSTO<br> 19/10/2018 - (11:20)
</div>
</div>
Agora um exemplo da como fica desalinhado com o nome grande.
<div style="page-break-inside: avoid; width: 80mm; height: 40mm; background: #ccc;">
<!-- Nome Cliente -->
<div style="page-break-inside: avoid;">
<b>RAFAEL VILELA FARIA BORGES DE ALMEIDA TESTE NOME GRANDE</b>
</div>
<!-- Endereço -->
<div style="text-align: left; font-size: 10px;">
BOA ESPERANÇA - MG<br> RUA SÃO TIAGO - 298
</div>
<!-- Volumes -->
<div style="height: 15mm; text-align: center; line-height: 15mm; font-size: 18px;">
<b>Vol.: 1 / 3</b>
</div>
<!-- Nome Cliente -->
<div style="text-align: left; font-size: 8px;">
CON. JOÃO ALGUSTO<br> 19/10/2018 - (11:20)
</div>
</div>