background color for <a> tag, need help with padding

[cannon303]

hi I'm setting some background color to my <a href> text tags to give a highlighted effect. I'm using padding so that the text fits neatly inside the coloured background. Everything's fine until you get a text link that is too wide for the div column that it is sat in. What happens is that you don't get any padding on the left hand side of the wrapped over text. I've included a pic showing you what's happening. http://www.chriscannon.co.uk/text.jpg the only style I've got so far is
text-decoration:none; color:#FFF; background:#01511C; padding:4px 10px 4px 10px;
this is assigned to the a tag. I don't want to put a break in as the links will be created by the user and I don't want to put the effect on the <li> tag that each link is sat in as I want to change the background colour on the a:hover state.

Any ideas???

Ta

[Fang]

Add a space character(&#32; ) either side of the hyphen.

[cannon303]

Add a space character( ) either side of the hyphen.

Hi thanks for your help but unfortunately I can't add a as the actual text links will be user generated. I have managed to 'fudge' it by adding an extra span inside the <a> tag and using position:relative and left: 10px. I say fudge it because I've read that adding extra elements to the page purely for styling purposes isn't really the 'correct' way of doing it. Also I haven't solved adding enough padding to the right hand side before the text wraps over. Doh! So I very much welcome any other suggestions. Thanks

[Fang]

I can't add a as the actual text links will be user generatedThis indicates a server script is involved, which means the character replacement is possible.