Optional line-breaking HTML entity that is always invisible

Question

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  takes effect (in a table with: word-wrap: break-word;),  gets displayed as -. I don't want to see the -; I want a line break without any character shown.

This answer might help. Not a character, but uses spans. http://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break — Unrelated, Aug 29 '16 at 23:04

David J. · Accepted Answer · 2020-12-04T01:52:19.767

100

 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  tag."- Zero-width space - Wikipedia

The  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.

edited Dec 04 '20 at 01:52

answered Apr 05 '13 at 19:18

David J.

31,569
22
122
174

4

Unicode handles it, but web browsers are not required to conform to the Unicode standard or to support this particular character. This is a tricky issue, but generally, ZWSP fails on fairly old browsers only, whereas `` has oddities in newer browsers, too; see http://www.cs.tut.fi/~jkorpela/html/nobr.html – Jukka K. Korpela Apr 05 '13 at 21:44
1

@David, What about the invisible separator? See http://www.fileformat.info/info/unicode/char/2063/index.htm – Pacerier May 17 '15 at 08:40
@Pacerier This appears to be intended for mathematical whitespace, given the context of http://unicode.org/cldr/utility/list-unicodeset.jsp?a=[:subhead=Invisible%20operators:]. From http://www.fileformat.info/info/unicode/char/2063/index.htm: "contiguity operator indicating that adjacent mathematical symbols form a list, e.g. when no visible comma is used between multiple indices". – David J. May 21 '15 at 12:24

score 13 · Answer 2 · edited May 23 '17 at 10:31

13

 looks like it does what you want, but it looks like the support for it, and  for that matter, is very inconsistent. So unfortunately, there may not be a particularly good way to do what you want.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 05 '13 at 18:48

Aaron Maenpaa

119,832
11
95
108

3

Thanks. A note: the claim that browser support that is inconsistent is from 2008. On my system, modern browsers (Firefox, Safari, Chrome) do the right thing with ``. I expect they also work for other word/line breaking methods. A comprehensive accounting can be found at [Soft hyphen (SHY) – a hard problem?](http://www.cs.tut.fi/~jkorpela/shy.html) – David J. Apr 05 '13 at 19:22
Here's an answer providing a nice overview of the support of word-hyphenation/-breaking/-splitting techniques: https://stackoverflow.com/a/28672471/3439786 Furthermore there's also a _caniuse_ page: http://caniuse.com/#feat=wbr-element – Dennis98 Aug 25 '17 at 07:42
3

One advantage of `` over the zero-width space Unicode entity is that if the string you are wanting to break is a URL that might be copied from a browser (as when providing academic reference to a web page that isn't a link), the Unicode entity is copied (at least in MacOS) and the resulting URL looks correct in a browser but breaks when attempting to access it. `` does not have this issue. – theJBRU Feb 16 '18 at 20:00
1

@DavidJ. Here's an updated link for _[Soft hyphen (SHY) – a hard problem?](https://jkorpela.fi/shy.html)_ – Tom Hundt Apr 21 '22 at 23:08

score 11 · Answer 3 · answered Feb 17 '19 at 12:23

I'll post this as an answer, in 2019, although it draws its substance entirely from other contributions on this page: use . It works well in allowing the wrap of long URLs and so not having them break out of content boxes. Users being able to paste the link you show into a web browser does matter and support for  is good in modern browsers, according to caniuse.com and my own quick tests in Chrome and Firefox for Android. I replaced forward slashes with forward slashes and a WBR, URLs now wrapping nicely.

Optional line-breaking HTML entity that is always invisible

3 Answers3