Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I have noticed, while looking at my page source, the characters &shy; 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">
<img src="floating_right.png">
<h1>Title</h1>
<div class="more stuff"> eventually justified text</div>

Any clues?

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.

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

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

Voila!

This script will find and remove all the invisible &shy;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.

The script worked but all my data-container attribute did not like that. I finally had the idea to open the file in Notepad ++ and i could see the actual - char right after the <div id="">- – MadeInDreams Jan 17, 2016 at 19:43

If you're finding &shy; 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 &shy; is and adds the hyphen.

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

You can safely get rid of the tag in the example you have posted. &shy; is known as the soft hyphen and is used to break words up across multiple lines in web pages. You would normally expect to see it in the middle of really long words in a paragraph the same as you would hyphenate a long word in a written paragraph to space it over two lines in case you run out of page as you write it.

As for how to remove it, you can open the web page up using your website editor, locate the tag and simply delete it from the file as you would any other text on a web page when you edit the page normally.

https://en.wikipedia.org/wiki/Soft_hyphen

Basically, it's a - I think. I would recommend looking for a - on your web page. If you don't see one I wouldn't recommend bothering with it unless you wanna use jQuery and make a simple script that'll remove it.

It seems you want to get rid of it. I'd recommend trying to move around your images and play with them a little until it goes away.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.