auto adjust the div width - html

Question

i have this button where if i give width="140px" and content is big it goes outside div.
i want content to auto fit to given div.
i tried lot but nothing working,
<div id="pushdaddy-button" class="pushdaddy-button" style="width:140px;height:30px;border-radius: 8px;bottom: 20px;right:2%; ; ;background-size: auto;background-position: center;background-repeat: no-repeat; ; ; ;;"><div class="pushdaddy-button-label" id="pushdaddy-button-label" style="color:#F2CA80; ;margin:0 34px;padding:4px 4px; ;; ; right: unset; background-color: transparent;color: #F2CA80;box-shadow:none; font-size: 16px; ">Chat with us 976654654444</div></div>
content is Chat with us 976654654444
and chat with us fits in 140 px but when we add some more text it goes outside of div which looks ugly
any help in solving this issue so that text always fits in div will be great.
i tried
display:inline-block
width:auto
and several other combination but nothing worked
here is screenshot how it looks
i want it to be fit in div. 140px is not the constraint. i want text to fit in whatever width it takes. but should be in one line. not in multiline

Answer 1

You're almost there with display: inline-block, but as you can see, allowing the button to determine its own width makes supporting arbitrary labels difficult.
.btn {
display: inline-block;
width: 140px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
Instead, you can remove the width and let the label decide how wide the button should be. Here I've used padding to place some space around the width of the text.
.btn {
display: inline-block;
padding: 10px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
You can still support widths with this approach, but you should switch to max-width and make sure it's only used when you need to prevent the button from taking up all the room in your template.
Here I've added a max-width to keep the button at 200px or below, but I have also had to add:
overflow: hidden to prevent the text from flowing out of the button
white-space: nowrap to prevent the text from forming multiple lines
text-overflow: ellipsis to prevent the text from being cut off by the end of the button
.btn {
display: inline-block;
padding: 10px;
max-width: 200px;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">The label for this button is too long and would intrude on other parts of the template</div>