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

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