max-width on nav li

using the autonav I wanted to give each li element a max-width in order to wrap any long page titles to two lines depth, however on links like below where it splits the words it still holds it max width of 100px and does not reduce, leaving an empty space before the next link. Any ideas of how to get this to work or is this not possible in CSS :

I have attached a screen shot

.navbar .nav > li {
   display: block;
   float: left;
   word-wrap: normal;
<li class=""><a data-toggle="" href="/index.php/birthday-parties/" class="">Birthday Parties<b class=""> </b></a></li>

1 Attachment

View Replies:
nickelfault replied on at Permalink Reply
Max-width works by extending the width of your element if it needs it, it won't reduce it for you. If your content is larger than 100px which in your case it is, it'll wrap to the next line and keep it's max-width.
Responsive replied on at Permalink Reply
thanks , any way around this or will it need some scripting ?
MysteriousCleon replied on at Permalink Reply
- nevermind -

(I thought about something, but I was wrong... ;) )
nickelfault replied on at Permalink Reply
I can't think of a way off the top of my head to do that without scripting :S