Max-Width Adjusts to Fit Text

max-width adjusts to fit text?

Not Possible by CSS Alone

According to BoltClock in this answer, it is not possible. The explanation makes sense. For the line wrap to occur to begin with, the line needs to reach the max-width setting. Once done, it wraps, but it does not reshrink because it is using that size for the calculation of the wrap.

As far as I know, this is still not possible.

label adjust content when reach max width

As the text doesn't have any spaces, you need to force wrapping to break the word on .lblComment:

word-wrap: break-word;

DEMO

html, css automatically resize/adjust width to fit content

See the solution.

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
  display: inline;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: inline;
  color: #607D8B;
}

https://jsfiddle.net/Lwrpegqe/2/

Width equal to content

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/

How to adjust div width with the siz of text inside it

Just 1 CSS function: width: fit-content
Note here: It doesnt work in IE.
Try it out:

.main_content {   width: 100%;  height: 400px;  font-weight: 800;
}
.main_content > * {  border: 1px solid red;  display: block;  margin-bottom: 30px;  text-align: center;   width: -moz-fit-content;  width: fit-content;}

<div class="first_article">  <div class="first_content">    <div class="main_content">       <span class="growth">Growth</span>       <h2>5 compelling user referral campaign examples</h2>       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.       </p>       <h6>Author</h6>    </div>  </div></div>

How to make the long text to fit inside a small div?

All you need is word-wrap: break-word;

.limit{    width:50px;    word-wrap: break-word;}

<div class="limit">    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p></div>

adjust the content inside the width

The reason for the element is not in the proper width is that it should increase the max-width. I changed the max width to 50px. it was at 40px

.lightgrey-badge-text-elipses {
  max-width: 50px;
}

I added a min-width, max-width and padding for the long text as follows

.tooltiptext {
  min-width: 100px;
  max-width: 500px;
  padding-left: 100px;
  padding-right: 50px;

}

You can break the lines of the paragraph to get the long text in different lines so you can see the entire thing. Like this

<span class = "new-content"><span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span></span>

You will have to add a class in the css too.

.new-content {
  white-space: pre-wrap;
}

Max-Width Adjusts to Fit Text