Div is truncating words and border on wrapping - css

Question

Maybe this is simple, but is making me nuts.
To understand the problem, the easy way is to look at the image.
Div width is truncating either word or the rounded border(also in case there is a space or dash between words). How can I force each "a" element to go into a new line if width is not enough to contain the element?
Here's the code
<div id="post-tags">
<span class="tag-title">Tagged:</span>
tag2
tag3
tag4
longtag5
<a href="#"li>longtag6</a>
longtag7
longtag8
longtag9
longtag10
longtag11
longtag12
</div>
And the CSS
#post-tags{
width: 560px;
float: left;
padding: 15px;
font-size: 11px;
}
#post-tags .tag-title{
color: #6b6b6b;
padding: 5px 0 0 5px;
}
#post-tags a{
line-height: 24px;
padding: 3px;
background: #a7d1e3;
padding: 4px 10px 4px 10px;
margin: 0 0 10px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#post-tags a:hover{
color: #a7d1e3;
background: #205F82;
}

Answer 1

I found that it doesn't work corerctly in chrome. A solution could be to float the elements. so you add float:left; for the selectors #post-tags .tag-title and #post-tags a. Of course now you will see that there is need to modify and padding and margins. A solution close to yours is applying margin: 0 2px 10px; and padding: 0 10px; for #post-tags a so your new css will seems like the following:
#post-tags {
width: 560px;
padding: 15px;
font-size: 11px;
overflow:hidden;
}
#post-tags .tag-title {
color: #6b6b6b;
padding: 5px 0 0 5px;
float:left;
}
#post-tags a {
line-height: 24px;
padding: 3px;
background: #a7d1e3;
margin: 0 2px 10px;
padding: 0 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left
}
#post-tags a:hover {
color: #a7d1e3;
background: #205F82;
}
here a live example: http://jsbin.com/adika4