I am having some issues with wrapping stuff to a new line when it reaches the max width. I have my blog set up displaying all of the tags in a single div, and when the first line reaches the max width the next tag should jump to the next line. (Attached is what is happening in Chrome and Firefox)
http://jsfiddle.net/QHWNF/7/
Here is the CSS Code:
p.tagHolder{
margin-bottom:5px;
line-height:25px;}
All the HTML/PHP is:
<a href="#"><span>TagName</span></a><a href="#"><span>TagName2</span></a>....
Syntax: word-wrap: normal|break-word|initial|inherit; Example 1: The following code demonstrates the “normal” value for the word-wrap property. The text is broken which is shown by a border.
You can make the contents of HTML <p>, <div>, and <span> elements not to wrap by using some CSS. You need the white-space property.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The <span> element shows the inline portion of a document. The <div> elements show a block-level portion of a document. A div is a block-level element and a span is an inline element. The div should be used to wrap sections of a document, while use spans to wrap small portions of text, images, etc.
Try setting your spans to display: inline-block
.
http://jsfiddle.net/QHWNF/10/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With