Как сделать ширину блока по ширине контента?

Question

[Виктор]

Есть блок максимальной шириной 220px. Внутри вложен спан а в нем три слова. Если их выстроить в одну строку, то они шириной будут не влезать в 220px и третье слово пернесется на новую строку. Как при этом сделать чтобы ширина обертки при этом была по контенту, то есть по ширине двух слов.
вот ссылка на кодпен https://codepen.io/lfsbngee-the-looper/pen/EaYvdvV
тут надо чтобы ширина зеленого блока была под контент

Answer 1

[Сергей delphinpro]

В общем случае – никак.
Если использовать неразрывные пробелы между нужными словами (nbsp;) или переносы (br), то можно задать ширину как width: min-content или width: max-content. Но это частные случаи, не универсально.

Comments

[Виктор]

Да, спасибо. Через css это не решается. Решил посредством небольшой функции js с использованием класса Range. Если кому-то надо решение в песочнице.