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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.