Choosing where a line breaks with CSS

Question

I've got a menu written with a ul and lis, and I'm having trouble getting the lines to wrap in the right place. Here's the HTML:

<li><span>●</span>&nbsp;<a href="/spl">Scottish Premier League</a></li>

I'd like it to look like this:

● Scottish
Premier League

But it looks like this:

●
Scottish Premier
League

The span with the dot is targetted with jQuery to expand the league to show the clubs, and the a navigates to the league page.

I've tried using white-space: nowrap; on the li, but that widens the ul and messes up the rest of the layout. I've tried putting <wbr> tabs in the league name, but that has no effect. Anything else I can try?

Answer 1

Found it. The problem was a display: inline-block on the <a> tag.