CSS: How can I remove the extra white space caused by a line break in a link?

Question

Edit 2: My time is short, so I will be using dippas' suggestion of using an actual image instead of a background. I'm keeping this question open just in case someone has a better solution. Thank you for all the help!

Original Question/Problem:

I have been Googling for the solution for an hour now, to no avail!

I am formatting a site to responsive and several long links that contain a background image aren't breaking correctly. I've tried float: left, display: block, display: inline-block and none of them work. The closest thing I got to a fix is setting it to display: inline, but I would rather have the background image to the side instead of right next to the last word.

This is my first time personally consulting this website (I have used your solutions to get out of ruts many times before, so thank you!), so I cannot post images, but here's a rough fiddle example (Edit: here's a new fiddle since the other one had a defined div width):

http://jsfiddle.net/2e28fanq/22/

(I want to get rid of that extra space between the arrow and "Educational")

CSS:

a {
    display: block;
    float: left;
    width: auto;
    font-size: 1.5em;
    padding-right: 40px;
    background: url('Arrow-Right.png') 100% 50% no-repeat;
}

Here is a crude illustration of what I need it to do:

Register for a FREE Educational >
Webinar

And what it's doing instead:

Register for a FREE Educational          >
Webinar

Seeing as it happens in JSFiddle, too, I doubt it has anything to do with the rest of my code. I cannot link to the site in question due to confidentiality/contract reasons, but I hope someone here can help me out with what I am able to provide. Thanks!

Answer 1

One simple solution is to use word-break: break-all:

.wrap {
  width: 425px;
  padding: 15px;
  border: 1px solid #000;
}

a {
  display: block;
  float: left;
  width: auto;
  font-size: 1.5em;
  padding-right: 40px;
  background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat;
  word-break: break-all;
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar</a>
  <div style="clear:both;"></div>
</div>

fiddle

This works for a long text too:

.wrap {
  width: 425px;
  padding: 15px;
  border: 1px solid #000;
}

a {
  display: block;
  float: left;
  width: auto;
  font-size: 1.5em;
  padding-right: 40px;
  background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat;
  word-break: break-all;
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar asdasd asd asd asda as Register for a FREE Educational Webinar asdasd asd asd asda as </a>
  <div style="clear:both;"></div>
</div>

fiddle example with long text