Width equal to content
CssWidthCss Problem Overview
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>
Css Solutions
Solution 1 - Css
I set width as max-content and it worked for me.
width: max-content;
Solution 2 - Css
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/)</sub>
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/
Solution 3 - Css
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.
Solution 4 - Css
Adding display: inline-block;
to the p
styling should take of it:
#container p{
background-color: green;
display: inline-block;
}
Solution 5 - Css
set width attribute as: width: fit-content
Solution 6 - Css
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>
Solution 7 - Css
Set display:inline-block
and then adjust your margins.
fiddle here: http://jsfiddle.net/Q2MrC/
Solution 8 - Css
You can use either of below :-
- 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.
- Using display : table
Solution 9 - Css
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.
Solution 10 - Css
Try using a
element instead. Or if you prefer, try <span>
display:inline
Solution 11 - Css
If you are using display: flex
for whatever reason and need on browsers like Edge/IE, you can instead use:
> display: inline-flex
Solution 12 - Css
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).
Solution 13 - Css
just use display: table; on your case.
Solution 14 - Css
You can use CSS property like this:
div {
display: inherit;
}
I hope this helps.