Вписывается в текстовое содержимое, а не занимает дополнительное место. ⇐ CSS

[Anonymous]

У меня есть случай, когда в теге div, находящемся внутри гибкого поля, имеется очень длинный текстовый контент. Мне бы хотелось, чтобы размер метки был равен размеру текстового содержимого, чтобы предоставить как можно больше места для других элементов.
В примере ниже мы видим, что первый контейнер имеет гибкий блок без указанной ширины, а метка занимает немного дополнительного места в конце своего элемента div. В результате отступы не совпадают с самим текстом, и кнопке приходится сжиматься до 144 пикселей, чтобы соответствовать этому содержимому.
В контейнере под ним я немного изменил размер, чтобы он выглядел так, как мне хотелось бы. Текстовое содержимое метки теперь занимает ровно столько места, сколько необходимо.

Код: Выделить всё

.container {
align-items: center;
background-color: #e3e3e3;
display: flex;
gap: 8px;
padding: 15px;
}

.with-width {
margin-top: 20px;
width: 500px;
}

.button {
background-color: black;
height: 80px;
width: 200px;
}

.label {
background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
background-clip: content-box, padding-box;
padding: 12px;
width: fit-content;
}

.capped-width {
width: 600px;
}

Код: Выделить всё

Words words words verylongwordverylongwordverylongwordverylongword words words words.





Words words words verylongwordverylongwordverylongwordverylongword words words words.

Есть ли способ добавить класс к метке (или, может быть, к родительскому контейнеру), который будет соответствующим образом изменять размер метки и избегать отображения пространства между текстом и отступом? Я знаю, что это довольно странно, поскольку родитель хочет, чтобы дочерний элемент сам определял размер, а дочернему элементу нужен такой большой размер, что ему приходится выполнять перенос.

Подробнее здесь: https://stackoverflow.com/questions/798 ... xtra-space