Optional line-breaking HTML entity that is always invisible

html, html-entities, line-breaks

Solution

`​` is the HTML entity for a unicode character called the zero-width space (ZWSP).

"In HTML pages, this space can be used as a potential line-break in long words as an alternative to the `<wbr>` tag."- Zero-width space - Wikipedia

The `<wbr>` tag also works, as mentioned by Aaron's answer. I think I prefer the HTML entity over the tag because the entity seems simpler: unicode handles it, not the web browser.

Problem

I want an optional line-breaking character that is always invisible that works with the `word-wrap: break-word;` CSS style. Here are some specifics. My goal is to break apart long links in reasonable places. These characters are a good place to start: `-`, `.`, `_`, `/`, `\`. This is not a Rails-specific question, but I wanted to share some code I'm using now: ``` module ApplicationHelper def with_optional_line_breaks(text) text.gsub(%r{([-._/\\])}, '\1&shy;') end end ``` Here's the problem with the code above: when `&shy;` takes effect (in a table with: `word-wrap: break-word;`), `&shy;` gets displayed as `-`. I don't want to see the `-`; I want a line break without any character shown.

Original source

Related problems