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     x000D   x000D   container   x000D    width  30   x000D    background-color  grey  x000D    x000D   x000D   container p   x000D    background-color  green  x000D    x000D   lt div id  container  gt  x000D     lt p gt Sample Text 1 lt  p gt  x000D     lt p gt Sample Text 2 lt  p gt  x000D     lt p gt Sample Text 3 lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try using a  lt span gt  element instead  Or if you prefer  try display inline

User · 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 · 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 · Answer

set width attribute as  width  fit-content  demo  http   jsfiddle net rvrjp7 pyq3C 114

User · 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 · Answer

Using display inline-block  it will work only for a correct sentence with spaces like   x000D   x000D   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    x000D   lt h5 gt Correct sentence with spaces  lt  h5 gt  x000D   lt div id  container  gt  x000D       lt p gt Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 lt  p gt  x000D   lt  div gt  x000D   lt h5 gt No specaes  not working   lt  h5 gt  x000D   lt div id  container  gt  x000D       lt p gt SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    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    x000D   x000D   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    x000D   lt h5 gt  Correct sentence with spaces  lt  h5 gt  x000D   lt div id  container  gt  x000D       lt p gt Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 lt  p gt  x000D   lt  div gt  x000D   lt h5 gt No specaes lt  h5 gt  x000D   lt div id  container  gt  x000D       lt p gt SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

just use  display  table  on your case

User · Answer

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

User · Answer

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

User · 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  lt br gt  tag after each one    lt div id  container  gt     lt p gt Sample Text 1 lt  p gt  lt br  gt     lt p gt Sample Text 2 lt  p gt  lt br  gt     lt p gt Sample Text 3 lt  p gt  lt br  gt   lt  div gt    New demo  http   jsfiddle net CvJ3W 7

User · Answer

Set display inline-block and then adjust your margins   fiddle here  http   jsfiddle net Q2MrC

User · Answer

You can use CSS property like this   div       display  inherit      I hope this helps

User · Answer

The solution with inline-block forces you to insert  lt br gt  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

User · Answer

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

[css] Width equal to content

Examples related to css

Examples related to width