What is ­ and how do i get rid of it

Question

I have noticed, while looking at my page source, the characters ­ showing just after a <div> tag. I went trough my coding and can't find where it is from; I did some research and they are saying that it is there so words can be cut.

Near the <h1> tag I have a floating image that is a little bit bigger than the title. I was wondering if that was causing it since I could extend the title on a second line because of the floating image but it remains.

How do I get rid of it? Why is it there?

Here is what the source looks like:

<div class="container">
&shy;
<img src="floating_right.png">
<h1>Title</h1>
<div class="more stuff"> eventually justified text</div>
</div>

Any clues?

EDIT

This is my actual code;

 echo '<div id="inputTag">­';
    echo '<img id="winClose" class="btn_close" src="http://images/html/bouttons/fermer.png" alt="Fermer">';
 echo '<h1>'.$titre.'</h1><br>';

I might also mention that I am using Webmatrix 3.

EDIT

To fix this I have opened the file in Notepad++ and there it was;

echo '<div id="inputTag">-­';

Voila!

Answer 1

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.

Answer 2

Soft hyphen (shy) This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

Answer 3

If you're finding ­ in your code, I'd recommend leaving it there, especially if it's coupled with a <wbr> tag. See example below:

**Go full page, then open your console and change the viewport width. You'll notice how the word automatically breaks where ­ is and adds the hyphen.

<h2>AAAAAAAABBBBBBBCCCCCCCDDDDDDEEE&shy;<wbr>EEEFFFFFFGGGGGGHHHHHHIIIIIIIJJJJJJJ</h2>