Prevent DIV from changing a defined size

Asked

Viewed 136 times

0

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

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

Example of code working:

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

html css

  • Hello Hugo Borges, css has to be online or has some external css file?

  • May be external.

2 answers

1


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

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

0

you can try using max-width to limit the maximum size of the div so you don’t want to exceed the limit of her Parent and deface the page. To reduce the name Voce can use word-break: break-all, which will break the line of text. My reference , in case you want to try it online, is 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’ve helped

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.