The <wbr> tag in HTML is used to create a Word Break opportunity. It offers a very fine level of control over where long “words” can break. I came across this tag in a post when I was busy researching how best to deal with long URLs in Word Documents and HTML pages. The <wbr> tag is in a way the opposite of HTML’s non-breaking space,
1. Where
Let us start with some rules around where URLs can be “broken up” between lines:
To achieve the equivalent in a Word document, see Splitting URLs over multiple lines.
- After a : (colon) or a // (double forward-slash)
- Before a / (single slash), a ~ (tilde), a . (full stop), a , (comma), a - (hyphen), an _ (underscore), a ? (question mark), a number sign, or a % (percent symbol)
- Before or after an = (equals sign) or an & (ampersand)
2. How
Compare the first paragraph to the paragraph that follows as you resize your browser horizontally:
Link to more information: https://www.businesswritingblog.com/business_writing/2006/06/how_to_urls_and.html
Vs.
Link to more information: https:
Note that the above is achieved without adding any punctuation that could be confused as part of the URL itself, for example, a hyphen.
See also the following HTML entities:
​which is for a Unicode character called the zero-width space (ZWSP).- the soft hyphen which is
­
References:
- HTML <wbr> Tag. (2022). Retrieved 17 October 2022, from https://www.w3schools.com/tags/tag_wbr.asp
- Using the shy soft hyphen in HTML | Tutorial. [online]. Available at: https://daily-dev-tips.com/posts/using-the-shy-soft-hyphen-in-html/