根据内容/标签优化按钮宽度

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