Word-Wrapping on LI's

Hello!

QUESTION
I was wondering if it is possible to apply a sort of word-wrapping to an anchor tag that is inside of a List Item. I currently have a side navigation that is made out of an Unsorted List. List Items inside of this UL have a border-bottom applied to it so that it separates each item from the next one. My only problem is that the lengths of some of the anchor tags I have within the LI's are being word-wrapped in an odd manner, causing it to read:

Seward County Sherrif's
Posse"

instead of

Seward County
Sheriff's Posse

is there a way to set a word-wrap to the <a> tags so they wrap around after a certain width?

The HTML

<div id="subleftcolumn" class="grid_3 alpha">
<ul>
<li><a>Seward County Sheriff's Posse</a></li>
<li><a>item 2</a></li>
<li><a>item 3 is longer than the others</a></li>
<li><a>item 4 is longer too</a></li>
</ul>
</div> <!-- /leftcol -->


The CSS

#subleftcolumn{
margin-top:125px;
margin-left:25px;
width:188px;
}
#subleftcolumn ul{
text-transform:uppercase;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
color:#004f74;
text-align:center;
}
#subleftcolumn ul li{
display:block;
padding:3px 0;
margin-left:0;
border-bottom:1px solid #ead7a7;
}
#subleftcolumn a{
max-width:130px;
line-height:110%;
color:#043b54;
text-decoration:none;
}


Any help would be appreciated

Hi dylanbaumannn,

I tried your code and it appears to wrap the way you want. Maybe you fixed it since you posted.

Take a look:

http://www.theeagleextra.com/testfiles/helpimages/word-wrap.png

The word wrap is correct in the example you provided, nothing is breaking at the wrong points. You could try using:


#subleftcolumn li a {
word-wrap: normal !important;
}


also the max-width and line-height you placed on the <a>'s doesn't do anything because the <a> tag is inline. You cannot set widths or heights on inline elements. Try setting it to display: block;


#subleftcolumn li a {
display: block;
word-wrap: normal !important;
}