Width equal to content

Question

I'm experiencing some trouble with the width property of CSS. I have some paragraphs inside a div. I'd like to make the width of the paragraphs equal to their content, so that their green background looks like a label for the text. What I get instead is that the paragraphs inherit the width of the div father node which is wider.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}


  Sample Text 1
  Sample Text 2
  Sample Text 3

user_2887133 · Answer

By default p tags are block elements, which means they take 100% of the parent width.

You can change their display property with:

#container p {
   display:inline-block;
}

But it puts the elements side by side.

To keep each element on its own line you can use:

#container p {
   clear:both;
   float:left;
}

_{(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)}

Demo: http://jsfiddle.net/CvJ3W/5/

Edit

If you go for the solution with display:inline-block but want to keep each item in one line, you can just add a tag after each one:


  Sample Text 1


  Sample Text 2


  Sample Text 3

New demo: http://jsfiddle.net/CvJ3W/7/

user_2332112 · Answer

Adding display: inline-block; to the p styling should take of it:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}

user_8959570 · Answer

Using display:inline-block; will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead

it's made to allow long words to be able to break and wrap onto the next line., also Facebook using it

Example

#container {
    width: 40%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
.flex{
    display: flex;
}

#wrap {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#wrap p{
   word-wrap: break-word;
    background-color: green;
}

 display:inline-block;



With spaces 
    Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1



  No specaes (not working )
  HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood






  word-wrap: break-word;



With spaces 
    Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1



  No specaes (working )
  HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood

user_2860460 · Answer

Set display:inline-block and then adjust your margins.

fiddle here: http://jsfiddle.net/Q2MrC/

user_1026132 · Answer

You can use flex to achieve this:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start will automatically adjust the width of children to their contents.

user_3058777 · Answer

Try using a element instead. Or if you prefer, try display:inline

user_3905007 · Answer

If you are using display: flex for whatever reason and need on browsers like Edge/IE, you can instead use:

display: inline-flex

With ~97% browser support for inline-flex.

user_9896732 · Answer

You can use CSS property like this:

div {
    display: inherit;
}

I hope this helps.

Width equal to content

14 Answers