如何根据里面的文字调整边框大小？答案

【问题标题】：How to adjusting border size according to text within?如何根据里面的文字调整边框大小？
【发布时间】：2019-04-10 18:48:59
【问题描述】：

我正在为我的石头剪刀布游戏 (Win:Draw:Lose) 设置记分牌显示，但如果结果上升得太高，它会显示在多行中。我将在哪里/如何实现使宽度更长的东西？理想情况下，最好具有某种功能以在文本即将转到下一行时使边框宽度变长。

用大边框来解决这个问题看起来很丑，可维护性也不是很好。

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

【问题讨论】：

请在此处添加您的 html 和 css 代码

标签： css

【解决方案1】：

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

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

所以如果需要的宽度小于一定的量，宽度将是最小宽度。但如果它需要更多空间，如您的示例所示，它将扩展以适应其内容。

您可以阅读有关 min-width here 的更多信息。

【讨论】：

对不起，我会确保在下一个问题中添加我的代码。您提供的链接帮助解决了我的问题“宽度：适合内容；”我确实遇到了其他几个问题，但 AKNair 的回答很有帮助。感谢你们的快速响应，我相信我会再次使用这个网站

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

【讨论】：