HTML character to break long word at specific point

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

I was too quick to accept this duplication - I used the `` in the end. I have voted to reopen — freefaller, Apr 12 '15 at 18:39

score 16 · Accepted Answer · answered Apr 12 '15 at 17:04

16

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>

answered Apr 12 '15 at 17:04

trentmwillis

581
3
6

Ack, I accepted the "duplicate" too quickly... I think this is a better/neater solution – freefaller Apr 12 '15 at 17:06
Is there a way for browsers to then automatically add a hyphen at the end of the word break? EDIT: Ok I just found out `` does just that! – Felix Jassler Sep 28 '21 at 23:14

HTML character to break long word at specific point

1 Answers1

Linked

Related