Как пофиксить пустое пространство при переносе строки?

Question

[Sanvi]

Всем привет! Воспроизвел в песочнице проблему, когда текст переносится на новую строку, появляется дополнительное пространство справа и контейнер становится чуть больше. Как сделать, чтобы контейнер был равен ширине его содержимого (как без переноса) и не имел без отступа (без js и без указания фиксированной ширины)?

Comments

[Ivan Ustûžanin]

в общем виде никак — после разбиения на строки из-за возможного переполнения ширина не уменьшается, в CSS нет такого механизма
но для некоторых случаев можно придумать хаки, как в ответе Сергей delphinpro

[Aetae]

CSS работает так: пока есть текст - ширина блока увеличивается пока не станет максимальной, после чего начинает переноситься всё ещё не влезающий текст. Обратно ширина уже не ужимается.
Поделать с этим ничего нельзя (и в большинстве случаев не нужно), только руками расставлять неразрывные пробелы как предложили в ответах или задавать какую-то ширину.

Вопрос тут в том чего именно ты хочешь добиться - за время существования этой проблемы было придумано много всяких кривых хаков под разные узкие ситуации.

Answer 1

[Сергей delphinpro]

только так:

<div class="items__item">Длинное&nbsp;описание&nbsp;на 11111111</div>

.items {
  width: min-content;
}