如何根据其中的文字调整边框大小？

Question

我正在为我的剪刀石头布游戏（Win：Draw：Lose）设置记分板显示，但是如果结果过高，则会在多行中显示。我在哪里/如何实施一些措施来增加宽度？理想情况下，最好具有某种功能以使文本将要移至下一行时延长边框宽度。

具有较大的边框宽度以解决此问题，看起来很丑，而且维护性也不佳。

任何帮助或建议将不胜感激，谢谢。

Answer 1

（请在提问时添加您的代码，以便我们知道问题所在并提供帮助） （在这里，我猜您使用了固定的width属性来设置记分板的宽度）

您应从记分板上删除width属性，而应使用min-width。另外，添加white-space: nowrap;以确保得分保持在1行之内。

因此，如果所需宽度小于某个特定值，则该宽度将为最小宽度。但是，如果需要更多空间（如您的示例所示），它将进行扩展以适合其内容。

您可以了解有关最小宽度here的更多信息。

Answer 2

我认为这是您要寻找的：JSFIDDLE link

body {
  background: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container-score {
  text-align: center;
  background: #3b4675;
  padding: 48px;
  position: relative;
}

.score {
  padding: 16px 48px;
  border: 4px solid white;
  font-size: 72px;
  color: white;
  white-space: nowrap;
}

.title {
  background: red;
  display: inline-block;
  padding: 4px 16px;
  color: white;
  position: absolute;
  top: 24px;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

<div class="container-score">
  <div class="title">
    <p>WIN : DRAW : LOSS </p>
  </div>
  <div class="score">
    <p>10: 10: 10</p>
  </div>
</div>