Neil C. Obremski Neil C. Obremski - 1 year ago 79
CSS Question

Is there an "invisible" hyphen character in Unicode / HTML?

I've found the soft hyphen character (U+00AD SHY) very useful but I am wondering if there is the same thing that will tell the browser where to break long words for wrapping without adding any character at all?

For example, let's say you have a narrow column in HTML with newspaper justification and there is a long URL explicitly in the text itself. You could add the soft/shy hyphen I mentioned but then when a user copy and pastes the URL it will contain those dash characters. An ideal situation would be the same visual results without a hyphen character so that the user may copy and paste the long word(s).

Thoughts or suggestions?

I tried searching for this but most of what I come up with is non-breaking space characters and essentially I am looking for the opposite.

UPDATE: I found the ZERO-WIDTH SPACE (U+200B) but it still has the problem that the character is preserved during copy&paste into the address bar so the results are even more confusing to the end user.

Answer Source

You want the HTML5 tag <wbr>, which is specified to do exactly what you are asking for.

If you can't rely on HTML5, U+200B ZERO WIDTH SPACE (&#8203;) should also work.

(The effects of copying text out of an HTML document, unfortunately, are underspecified. If <wbr> doesn't do what you want upon copy-and-paste, you might want to bring it up to the WhatWG — the easiest way to do that is probably to file a Github issue on the spec.)