Word-Wrapping on LI's

[dylanbaumannn]

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

[Kevin_M_Schafer]

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:

[Sammy12]

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;
}