Why browsers does not render trailing <br> in <div>?

Issue

I have a div with dynamic content where lines are delimited by <br> element. The problem is that all major browser ignores the last <br> element.

<div>
    long content ...
</div>
<div>
    long content ...
    <br>
</div>
<div>
    long content ...
    <br>
    <br>
</div>

See https://jsfiddle.net/4ppqb1ug/. Example have 3 divs.

• First have no <br> at end.
• Second have 1 <br> at end but if you scroll the div at bottom no blank line is at end.
• The third one have 2 <br> at end, but only one is rendered.
• the fourth not present in demo have 3 <br>, only 2 are rendered.
• the fifth not present in demo have 4 <br>, only 3 are rendered.

Why are browser ignoring the last one? Could I prevent this? Is there better solution than duplicationg the last <br>?

Solution

Is there better solution than duplicationg the last <br>?

Yes, there is:

.container:after {
  content: '\2060'
}

We're choosing to append a pseudo-element containing a word joiner character. It's effectively the same as just adding another <br>, but it's a pure CSS solution that is invisible to the user. This character could be anything that is zero width as long as it makes the browser honour the last <br> in our content.

Answered By - J Garcia