Div is truncating words and border on wrapping

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>
    开发者_运维百科                        <a href="#">tag2</a>
                            <a href="#">tag3</a>
                            <a href="#">tag4</a>
                            <a href="#">longtag5</a>
                            <a href="#"li>longtag6</a>
                            <a href="#">longtag7</a>
                            <a href="#">longtag8</a>
                            <a href="#">longtag9</a>
                            <a href="#">longtag10</a>
                            <a href="#">longtag11</a>
                            <a href="#">longtag12</a>
                </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;

    }

---

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