Huge Gaps on a url using encodeURIComponent();

Huge Gaps on a url using encodeURIComponent();

Hy Guys i´m encoding some urls using encodeURIComponent(); for sharing links like google+,twitter,mailto:

The links are working fine but when they get hover some parts of the url represent huge gaps .


IS THIS NORMAL??WHAT I´M DOING WRONG? HERE IS A FIDDLE EXAMPLE