7

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
freefaller
  • 19,368
  • 7
  • 57
  • 87

1 Answers1

21

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>
trentmwillis
  • 651
  • 4
  • 6
  • Ack, I accepted the "duplicate" too quickly... I think this is a better/neater solution – freefaller Apr 12 '15 at 17:06
  • 2
    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