Problem with tags list <li> inside a fixed width UL

Question

I have a small problem with a list of tags into a wordpress blog!

My list of tags are contained into a fixed width UL.

I would like to avoid word-wrap like for the tag "Human Resources"...

I would prefer that the entire tag goes on a second line.

I'm using the function the_tags like this :

<?php the_tags('<ul id="my-tags"><li class="cute-tag">','</li><li class="cute-tag">','</li></ul>'); ?>

My Css

#my-tags{
margin:0;
width:350px;
float:left;
}

#my-tags li {
display: inline;
font-family: Verdana, Arial,sans-serif;
text-transform:uppercase;
font-size: 10px;
margin-right:5px;
font-weight:600;
padding:4px;
background:#2d0e0f;
list-style-type: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#my-tags li  a{
color:#FFFFFF;
text-transform:uppercase;
font-weight:100;
font-style: normal;
}

#my-tags li  a:hover{
text-decoration:none;
}

Thanks in advance for your time.

Cheers,

Jk_

Answer 1

You can stop the tags from wrapping using a white-space css rule:

#my-tags li {
    ...
    white-space:nowrap;
}

Update: I can't see any reason why the above wouldn't work, but have you tried applying the same to the anchor instead?

#my-tags li a {
    ...
    white-space:nowrap;
}

Answer 2

Your problem starts on your css definitions of the list..

i set up a corrected fiddle for you: http://jsfiddle.net/tobiasmay/72q9n/

after you corrected these, no-wrap should work.