Div breaking when label content is too big

Asked

Viewed 475 times

2

To div one-page HTML this breaking when the text size of one of the labels I have inside it is very large, I am using the following code:

<div class="divRelato" style="background-color: #eee">
  <label>Detalhes físicos Detalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicos</label>
  <label class="lblHoraImpacto" style="float: right;color:#999;margin-right: 0px">12-12-2016 13:30</label><br>
</div>

The result with the label with little content is this:

inserir a descrição da imagem aqui

Already the label with large content breaks, returning:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

I believe that when the second label (date and time) is "played" to the next line, the div should expand along. This behavior does not happen with the use of paragraphs.

html css web-application div

  • I’m away from the PC, but research CSS on nobr.

  • Have any css applied to div? If yes post it please

  • @Leandro J. S. Paiva Have you tried to create a "Table" inside the div ?

  • 1

    Import the bootstrap and use the grid system. https://v4-alpha.getbootstrap.com/layout/grid/

  • Change the above code to simulate the problem. The Current does not happen. And by chance you have another div on the outside, each message is inside div``divRelato ?

  • uses flexbox to adjust the time at the end of the div and leave the behavior as if it were table

  • Ta, what is the doubt?

Show 2 more comments

1 answer

1


In html adds an auxiliary div to the container of the blocks and uses flex-box as Avia said, follows below the result

      <div class="divRelato" style="background-color: #eee">
        <div class="cntAuxiliar">
            <label class="pr">Detalhes físicos Detalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDetalhes físicosDet</label>
            <label class="lblHoraImpacto" style="color:#999;">12-12-2016 13:30</label>
        </div>
     </div>

CSS

        div.divRelato{
      display:flex;
      flex-direction: column;
    }
    div.divRelato > label.lblHoraImpacto{
      display: flex;
      min-width: 250px;
      justify-content: center;
      align-items: center;
    }
    div.cntAuxiliar {
      display: flex;
      flex-direction: row;
    }
    div.cntAuxiliar{
      display: flex;
      justify-content: space-between;
    }
    div.cntAuxiliar > label.pr {
      display:flex;
      flex-grow: 1;
    }
    div.cntAuxiliar > label.lblHoraImpacto {
      display:flex;
      flex-grow: 1;
      justify-content: flex-end;
      width: 200px;
      align-items: center;
    }

outworking

https://jsfiddle.net/zhho36v0/3/

Browser other questions tagged html css web-application div

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