Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    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
    Code:
    <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
    Code:
    #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
    Last edited by dylanbaumannn; 02-07-2012 at 10:33 PM.

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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:

    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    The word wrap is correct in the example you provided, nothing is breaking at the wrong points. You could try using:

    Code:
    #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;

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •