4

I have a paragraph that contains a span. The <p> tag's width is much wider than the <span> it contains, but I would like it to be only as large as its child <span>. 

<p>
    <span>Some text.</span>
</p>

I tried width: auto but that doesn't seem to work.

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
Jackmc1047
  • 391
  • 2
  • 5
  • 12
  • How will the span know when to wrap? – Sampson Dec 20 '13 at 15:03
  • http://stackoverflow.com/questions/5367056/how-do-i-make-a-div-automatically-wide-enough-to-accomodate-its-floating-childre http://stackoverflow.com/questions/15102480/how-to-make-a-parent-div-auto-size-to-the-width-of-its-children-divs http://stackoverflow.com/questions/12747045/css-shrink-a-parent-div-to-fit-one-childs-width-and-constrain-the-width-of-th – TreeTree Dec 20 '13 at 15:03

3 Answers3

6

use display:inline-block; with p element.

p{
    display:inline-block;
}

Js Fiddle Example

Sachin
  • 40,216
  • 7
  • 90
  • 102
1

The problem is span is inline element. So his size can't be fixed, and you can't know it directly.

<p> is a block. So he have a size and by default is 100%.

So, you can give a style inline to the <p>

display: inline;

or if you want to keep the block advantage :

display: inline-block;
Yoann Augen
  • 1,966
  • 3
  • 21
  • 39
1

Another solution apart from inline is to float the element

DEMO

CSS

p {
    border:1px solid #000;
    float:left
}
NoobEditor
  • 15,563
  • 19
  • 81
  • 112