HTML character to break long word at specific point [duplicate]

Question

Is there an encoded character in HTML that allows a word to break at a specific point, but not create a space if it is not required?

For instance, I want to show a full URL such as the following if the space allows it...

http://www.example.com/mylongpagename

But if showing in a small area (for instance on a mobile screen) I want to split it between the / and my so that it automatically wraps as...

http://www.example.com/
mylongpagename

I'm aware of the CSS command of word-wrap: break-word; but that could end up as something like...

http://www.example.com/mylongpa
gename

Answer 1

You can use the <wbr> HTML element. It specifies a "word break opportunity", meaning it will break at that point only if needed (e.g., on small screens).

So in your example you could do something such as:

<p>http://www.example.com/<wbr>mylongpagename</p>