Как настроить размер границы в соответствии с текстом внутри?
Я настраиваю отображение табло для моей игры «камень-ножницы-бумага» (Победа:Ничья:Проигрыш), но если результаты становятся слишком высокими, они отображаются в нескольких рядах. Где/как мне реализовать что-то, чтобы увеличить ширину? В идеале было бы лучше иметь какую-то функцию, которая удлиняла бы ширину границы, когда текст вот-вот перейдет к следующей строке.
Наличие большой ширины границы для решения этой проблемы выглядит некрасиво и не очень удобно для сопровождения.
Любая помощь или предложения будут высоко оценены, спасибо.
Ответы 2
(пожалуйста, добавьте свой код, задавая вопрос, чтобы мы могли знать, что не так, и помочь)
(здесь я предполагаю, что вы использовали фиксированное свойство width, чтобы установить ширину табло)
Вы должны удалить свойство width из таблицы результатов, вместо этого используйте min-width. Кроме того, добавьте white-space: nowrap;, чтобы счет оставался в 1 строке.
Так что, если необходимая ширина меньше определенной величины, ширина будет минимальной. Но если ему нужно больше места, как в вашем примере, он будет расширяться, чтобы соответствовать его содержимому.
Вы можете узнать больше о минимальной ширине здесь.
Я обязательно добавлю свой код в свой следующий вопрос, извините. Предоставленная вами ссылка помогла решить мою проблему "width: fit-content;" Я столкнулся с парой других проблем, но ответ AKNair мне очень помог. Спасибо вам обоим за быстрое время ответа, и я уверен, что буду использовать этот сайт снова <3
Я думаю, это то, что вы ищете: ссылка 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>
пожалуйста, добавьте свой код html и css сюда