Optimize button width based on content/label

Question

Below is the screenshot of HTML source code, in that a button occupying more width than the content in it. Highlighted in yellow having space at right side of the button. I know its because of multi-line. Is that expected behavior across browsers, is there any solution to use the width based on content?

div {
      width: 100px;
  }
  button {
      display:inline !important;
      text-align: left;
  }

<div>
  <button>
Testing Programs 
</button>
</div>

Answer 1

In general yes, unless you define the max height of it. You can try something like this.

HTML

<div class="parent-div">
  <p class="text">Try to change the max width in the css or remove some of the text here</p>
</div>

CSS

.parent-div {
  max-width:600px;
  padding:10px;
  background-color:#FFF000;
  display:block;
  margin: 0 auto;
}

.text {
  font-size:5vw;
  color:#FF00FF;
  text-align:center;
}