<br> tag forces browser to put a line-break.
But <wbr> defines where the browser should put a line-break if it was needed, otherwise there won't be any line-break.
As said in https://www.w3schools.com/tags/tag_wbr.asp:
"When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities"
The HTML <wbr> tag is used for specifying a line break opportunity.
The <wbr> tag can be used on very long words or other long strings of text with no spaces. Without the <wbr> tag, these long strings of text could either wrap in strange place (making it difficult to read), or not wrap at all - inadvertently pushing the page layout to the side (again, making it difficult to read and view the document as intended).
The difference between the <wbr> tag and the <br> tag is that the <br> tag forces a line break. The <wbr> tag, on the other hand, simply represents a line break opportunity - the browser should only render a line-break if necessary.
The <wbr> tag is an empty tag. In other words, it has no end tag.