[css] Width equal to content

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 {_x000D_
  width: 30%;_x000D_
  background-color: grey;_x000D_
}_x000D_
_x000D_
#container p {_x000D_
  background-color: green;_x000D_
}

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

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

The solution with inline-block forces you to insert <br> after each element.
The solution with float forces you to wrap all elements with "clearfix" div.

Another elegant solution is to use display: table for elements.

With this solution you don't need to insert line breaks manually (like with inline-block), you don't need a wrapper around your elements (like with floats) and you can center your element if you need.

http://jsfiddle.net/8md3jy4r/3/

Despite using display: inline-block. My div would fill the screen width when the children elements had their widths set to % of parent. If anyone else is looking for a solution to this and doesn't mind using screen proportion instead of parent proportion, replace the % with vw for width (Viewport Width), or vh for height (Viewport Height).

just use display: table; on your case.

You can use either of below :-

1) display : inline-block :

http://jsbin.com/feneni/edit?html,css,js,output

Uncomment the line

 float:left;
 clear:both 

and you will find that parent container has collapsed.

2) Using display : table

http://jsbin.com/dujowep/edit?html,css,js,output

I set width as max-content and it worked for me.

width: max-content;

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.

You can use CSS property like this:

div {
    display: inherit;
}

I hope this helps.

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

http://jsfiddle.net/pyq3C/

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

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.

set width attribute as: width: fit-content

demo: http://jsfiddle.net/rvrjp7/pyq3C/114

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

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

Using display:inline-block; it will work only for a correct sentence with spaces like

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

<h5>Correct sentence with spaces </h5>_x000D_
<div id="container">_x000D_
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>_x000D_
</div>_x000D_
<h5>No specaes (not working )</h5>_x000D_
<div id="container">_x000D_
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>_x000D_
</div>

Why not using word-wrap: break-word;? it's made to allow long words to be able to break and wrap onto the next line.

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

<h5> Correct sentence with spaces </h5>_x000D_
<div id="container">_x000D_
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>_x000D_
</div>_x000D_
<h5>No specaes</h5>_x000D_
<div id="container">_x000D_
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>_x000D_
</div>