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>

score 214 · Answer 1 · answered Aug 03 '17 at 19:47

214

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

width: max-content;

answered Aug 03 '17 at 19:47

Sarneet Kaur

2,860
1
14
12

9

Not supported by IE or Edge though – pkr Jan 07 '18 at 01:10
1

https://caniuse.com/#search=max-content Agree with @pkr298 Just use for 'fun' stuff - not production. – CodeFinity Feb 01 '18 at 15:27
1

Also, the component will have the width set, and if the browser window is less than that, it will not adjust. – Nacho Coloma Feb 06 '18 at 21:22
This is what I was looking for. Simple and crisp. – Tanzeel Jan 10 '20 at 04:59
2

@NachoColoma i now use `max-width: max-content;` and that brings back the responsive behavior of the container element. – honk31 Mar 17 '20 at 08:22
2

@pkr298 That's no longer the case for Edge according to https://caniuse.com/#search=max-content. – Maxie Berkmann Sep 01 '20 at 18:54

score 168 · Accepted Answer · edited Jul 27 '16 at 14:28

168

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 <br> tag after each one:

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

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

edited Jul 27 '16 at 14:28

mwfearnley

3,303
2
34
35

answered Dec 04 '13 at 19:04

DaniP

37,813
8
65
74

4

Seeing the new edit, I respectfully disagree with throwing ```
``` for styling. – CodeFinity Feb 01 '18 at 15:26
1

@VisWebsoft I agree with you you always have the option to use ´float´ to keep each element in new lines. But give always all the possible solutions is nice, just choice the one of your preference. – DaniP Feb 01 '18 at 20:20

score 14 · Answer 3 · answered May 20 '16 at 17:57

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/

score 11 · Answer 4 · answered Dec 04 '13 at 19:03

11

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

http://jsfiddle.net/pyq3C/

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

answered Dec 04 '13 at 19:03

Stuart Kershaw

16,831
6
37
48

It partially works now. The width of the paragraphs equal the content as I wanted. The problem is that now I get all the paragraphs in just a line instead of three. – user3067088 Dec 04 '13 at 19:08
You can force to the next line by adding: `float: left; clear: left;` – Stuart Kershaw Dec 04 '13 at 19:10
Adding `float: left` to an element displayed as `inline-block` will set it to `block` according to CSS 2.1 REC ([relationships between display, position, and float](http://www.w3.org/TR/CSS2/visuren.html#choose-position)) so you can as well remove `inline-block` and it won't change anything – FelipeAls Dec 04 '13 at 19:32

RVRJ · Answer 5 · 2017-08-23T12:45:18.153

10

set width attribute as: width: fit-content

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

edited Aug 23 '17 at 12:45

answered Aug 23 '17 at 11:37

RVRJ

135
1
8

Liam · Answer 6 · 2021-07-05T11:42:30.653

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;
}

<h1> display:inline-block;</h1>
<div class='flex'>

<div id="container">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="container">
  <h5>No specaes (not working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>




<h1>  word-wrap: break-word;</h1>
<div class='flex'>

<div id="wrap">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="wrap">
  <h5>No specaes (working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>

score 5 · Answer 7 · answered Dec 04 '13 at 19:08

5

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

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

answered Dec 04 '13 at 19:08

sn3ll

1,629
1
10
16

satyam kumar · Answer 8 · 2016-06-30T17:27:15.013

5

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

edited Jun 30 '16 at 17:27

answered Jun 30 '16 at 17:22

satyam kumar

1,467
13
7

score 5 · Answer 9 · answered Feb 06 '18 at 21:28

5

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.

answered Feb 06 '18 at 21:28

Nacho Coloma

7,070
2
40
43

score 2 · Answer 10 · answered Dec 04 '13 at 19:06

2

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

answered Dec 04 '13 at 19:06

Testare

338
3
12

It partially works now. The width of the paragraphs equal the content as I wanted. The problem is that now I get all the paragraphs in just a line instead of three. – user3067088 Dec 04 '13 at 19:15

score 2 · Answer 11 · answered Jun 08 '18 at 00:06

2

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.

answered Jun 08 '18 at 00:06

youngrrrr

3,044
3
25
42

score 0 · Answer 12 · answered Aug 12 '17 at 11:40

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

score 0 · Answer 13 · answered Mar 30 '18 at 12:28

0

just use display: table; on your case.

answered Mar 30 '18 at 12:28

was

1

3

Please make your answer better by explaining why `display: table` is the way to go. Look at other answers to get better idea. – M. Prokhorov Mar 30 '18 at 13:17

score -2 · Answer 14 · edited Mar 11 '20 at 03:26

-2

You can use CSS property like this:

div {
    display: inherit;
}

I hope this helps.

edited Mar 11 '20 at 03:26

Harshit

1,510
19
42

answered Mar 10 '20 at 18:08

Shadab shaikh

1

Width equal to content

14 Answers14

Linked

Related