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

【问题标题】：Optimize button width based on content/label根据内容/标签优化按钮宽度
【发布时间】：2019-04-19 20:50:57
【问题描述】：

下面是 HTML 源代码的屏幕截图，其中一个按钮比其中的内容占据了更多的宽度。以黄色突出显示，按钮右侧有空间。我知道它是因为多线。这是跨浏览器的预期行为，是否有任何解决方案可以根据内容使用宽度？

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

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

【问题讨论】：

标签： html css button angular-material-table

【解决方案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;
}

【讨论】：