auto adjust the div width

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

Can the button be wider than 140px to allow room for the text? Or should the text resize/wrap/break to fit within 140px? — D M, Jul 28 '21 at 14:00
What do you mean it "goes outside the div"? It overflows width-wise, or it wraps and overflows height-wise? — TylerH, Jul 28 '21 at 14:04
First things first, inline CSS is not recommended. Read about it in this post here [What's so bad about inline CSS](https://stackoverflow.com/q/2612483/13983399) — BeerusDev, Jul 28 '21 at 14:05
@TylerH it goes width wise. in question i am attaching screnshot — sonutup, Jul 28 '21 at 14:05
Looks like you have additional styles that aren't included in your code here. Please add them so we can see a [mcve]. — TylerH, Jul 28 '21 at 14:09

D M · Accepted Answer · 2021-07-28T14:13:46.540

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>

auto adjust the div width

1 Answers1