CSS span not fully packaged

Question

I'm having trouble wrapping content on a new line when it reaches its maximum width. My blog is set up to display all tags in a single div, and when the first line reaches its maximum width, the next tag should go to the next line. (Attached is what happens in Chrome and Firefox)

http://jsfiddle.net/QHWNF/7/

Here is the CSS code:

p.tagHolder{ margin-bottom:5px; line-height:25px;} 

All HTML / PHP is:

 <a href="#"><span>TagName</span></a><a href="#"><span>TagName2</span></a>.... 

Answer 1

Try setting your spacing to display: inline-block .

http://jsfiddle.net/QHWNF/10/

Answer 2

Add word-wrap: normal; and word-break: normal; into the span container and p . This will make sure that the words are broken only at the permitted break points, when necessary to wrap.

I hope this helps!

Answer 3

For Chrome and Firefox use word-break: break-word and for IE use -ms-word-break: keep-all