Soft Hyphen in HTML (<Wbr> VS. &Shy;)

Soft hyphen in HTML ( wbr vs. )

~~Unfortunately, 's support is so inconsistent between browsers that it can't really be used.~~

~~QuirksMode is right -- there's no good way to use soft hyphens in HTML right now. See what you can do to go without them.~~

2013 edit: According to QuirksMode, now works/is supported on all major browsers.

HTML: Soft hyphen () without dash?

Though I'm not sure how this does cross-browser (probably pretty well), you could always use the thin space character ( ) ~~or the zero-width space ().~~⁺⁺

john.doe @example.com

⁺⁺ I would not suggest using the zero-width space, as apparently some browsers will not render it correctly (source).

(soft hyphen) and Chrome and Safari

Especially considering your fonttest website, it seems that the problem is caused by two factors: some WebKit browsers on OS X a bug that make them render a soft hyphen character inside a line of text using a glyph for it, instead of just treating it as a control character; and the StagSansWeb font either has no glyph for it (making the browsers use a dummy glyph) or have an odd-looking glyph for it. If these browsers additionally treat the soft hyphen as allowing hyphenation, this would explain the symptoms, provided that Helvetica has an empty glyph for the soft hyphen.

This is highly speculative, or conjectural.

On a more solid basis, the rendering of text where hyphenation has taken place has not been rigorously defined in standards. If browsers apply hyphenation on foobar, they are supposed to render “foo” followed by a hyphen at the end of a line, but the standards don’t say which hyphen. It could be HYPHEN-MINUS (i.e., the Ascii hyphen), or HYPHEN, or even SOFT HYPHEN, if it has a glyph. Maybe even something else. And it may even depend on language, as some languages have hyphens of their own.

So it is understandable that WebKit browsers have started supporting the proprietary property -webkit-hyphenate-character. However, it does not seem to be properly implemented. Testing -webkit-hyphenate-character: "\00AD" on Chrome and Safari on Windows 7, I notice that they “hyphenate” words (containing soft hyphens) without adding any hyphen (as if they used an empty glyph), even though other values for the property work OK.

To conclude, I would expect that you can avoid the issue by avoiding fonts like StagSansWeb for texts that may get hyphenated. It is possible that the problem can be fixed by modification to the font.

Show hyphens only when necessary? (soft-hyphens doesn't cut it)

Use a container with display: inline-block around the long words.

body {   margin-left: 30px;}div {   border: solid 1px black;}.wide {  border: solid 1px blue;      width: 500px;}.narrow {   border: solid 1px red;  width: 360px;} h2 {   font-family: 'Courier New';    font-weight: 400;    font-size: 87px;  }code { background-color: #eee;}
.unbreakable {display:inline-block}

<p> <code>Super&shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p><p><div class="narrow"><h2>Hi <span class="unbreakable">Superman</span></h2></div>
<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>This uses the same code as the previous example</p><div class="wide"><h2>Hi <span class="unbreakable">Superman</span></h2></div>

What is and how do i get rid of it

This script will find and remove all the invisible s on your page:

document.body.innerHTML=document.body.innerHTML.replace(/\u00AD/g, '');

It works by searching for the Unicode character U+00AD. It's invisible when it doesn't sit at a line break, which is probably why you can't find it in your code.

Soft hyphen () breaks center alignment in flexbox

This has nothing to do with the soft hyphen (which is an HTML entity and not a tag, BTW). Look at the third example below which simply contains a longer text without br and elements: It is also left-aligned since it automatically will span the whole available width as soon as it gets longer than one line and is broken automatically.

So the only solution to get what you want is to either limit the width of the p tag or to use all br tags (so that no line becomes as long as the width of the container - which however is hard if you consider resposiveness).

.box {
  background: #227486;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Using a soft hyphen:
<div class="box">
  <p>
    Text with a veryveryverylongword.
  </p>
</div>
Desired result (using a linebreak tag):
<div class="box">
  <p>
    Text with a veryvery-<br>longword.
  </p>
</div>
A longer text without break or soft hyphen:
<div class="box">
  <p>
    And some more text which simply contans more words and therefore will break into several lines.
  </p>
</div>

Is there a way to put an hyphen when wbr occurs?

You can use instead:

thisareallyreallyreallyreallyreallyreallyandverylongwordwithashynewline

Soft Hyphen in HTML (<Wbr> VS. &Shy;)