Оптимизировать ширину кнопки на основе содержимого / метки

Question

Ниже приведен скриншот исходного кода HTML, в котором кнопка занимает большую ширину, чем содержимое в ней.Выделены желтым цветом с пробелом на правой стороне кнопки.Я знаю это из-за многолинейности.Это ожидаемое поведение в браузерах, есть ли решение использовать ширину в зависимости от содержимого?

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

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

Answer 1

В общем, да, если вы не определите его максимальную высоту. Вы можете попробовать что-то вроде этого.

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;
}