Как настроить размер границы в соответствии с текстом внутри?

#css

Вопрос:

Я настраиваю отображение табло для своей игры «Камень, ножницы, бумага» (победа: ничья: поражение), но если результаты слишком высоки, они отображаются в нескольких строках. Где / как я мог бы реализовать что-то, чтобы увеличить ширину? В идеале, лучше всего было бы иметь какую-то функцию для увеличения ширины границы, когда текст собирается перейти к следующей строке.

Наличие большой ширины границы для решения этой проблемы выглядит некрасиво и не очень хорошо поддерживается.

Любая помощь или предложения будут высоко оценены, спасибо.

Ответ №1:

(пожалуйста, добавьте свой код, задавая вопрос, чтобы мы могли узнать, что не так, и помочь) (здесь я предполагаю, что вы использовали фиксированное width свойство для установки ширины табло)

Вы должны удалить width свойство из табло, использовать min-width вместо этого. Кроме того, добавьте white-space: nowrap; , чтобы оценка сохранялась в 1 строке.

Так что, если необходимая ширина меньше определенной величины, ширина будет минимальной. Но если ему нужно больше места, как в вашем примере, он будет расширяться, чтобы соответствовать его содержимому.

Вы можете прочитать больше о минимальной ширине здесь.

1. Я обязательно добавлю свой код в свой следующий вопрос, извините. Предоставленная вами ссылка помогла решить мою проблему «width: fit-content;» Я столкнулся с парой других проблем, но ответ AKNair очень помог. Спасибо вам обоим за быстрое время отклика, и я уверен, что снова буду использовать этот сайт <3

Ответ №2:

Я думаю, это то, что вы ищете: ссылка JSFIDDLE

 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>