Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS span not wrapping fully

Tags:

html

css

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>....

ChromeFirefox

like image 853
Cow Avatar asked Aug 28 '12 20:08

Cow


People also ask

How do you wrap text in a span in CSS?

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.

How do you make a span not wrap?

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.

How do you make a element not wrap in CSS?

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).

Can a span wrap a div?

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.


1 Answers

Try setting your spans to display: inline-block.

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

like image 159
Nate Avatar answered Sep 28 '22 09:09

Nate