Prevent DIV from changing a defined size

Navigation
0

I'm trying to assemble an HTML page to print a label with 80mm x 40mm. It's working fine, but when the person's name is too big the label loses alignment, consuming 2 tags.

I need to lock the size of the div , and if the text is bigger it has to be summarized and does not change the size of it.

Example of working code: 

<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>

Now an example of how it goes misaligned with the big name. 

<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>
    
asked by anonymous 19.10.2018 / 16:25

2 answers

1

You can add CSS in the client name line so that it does not exceed more than one line, another important thing is to add "display: block" in the css of your main div making that div with a fixed height specified. 

<div style="page-break-inside: avoid; width: 80mm; height: 4cm; background: #ccc; display:block; display: block">

      <!-- Nome Cliente -->
      <div style="page-break-inside: avoid;">
        <b style="max-width: 80mm; white-space: nowrap;overflow: hidden !important; text-overflow: ellipsis; display: inline-block;">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>
    
19.10.2018 / 16:48
0

You can try to use max-width to limit the maximum size of the div so you do not want to exceed the parent's limit and unconfigure the page. To reduce the name you can use word-break: break-all, which will break the text line. My reference, if you want to test online, is the W3Schools the links of my help are Max-width  and Word_break 

<div style="page-break-inside: avoid; width: 80mm; height: 40mm; background: #ccc;">

  <!-- Nome Cliente -->

  <div style="page-break-inside: avoid; max-width:80mm">
    <b style="word-break: break-all">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>

I hope I have helped

    
19.10.2018 / 16:42
Fill vector with TextBox in C # How to get the value of $ _GET ['sealed'] to leave the checkbox selected using PHP