Как реализовать подстраивание ширины блока под его текстовое содержимое при переносе слов?

Question

[Павел Клешнин]

Есть блок с короткой фразой (обычно 1-2 строчки). При переносе слов блок не ужимается, а оставляет пустое пространство справа. Как заставить блок вести себя нужным образом?
Песочница: https://codepen.io/shake_shake1/pen/poggrwy
Блочно-строчное отображение не помогает, width: fit-content и другие значения тоже. Слова должны отображаться целиком, без переноса. Уже думал js-костыль прикрутить, но всё ещё надеюсь, что есть адекватное css-решение такой, казалось бы, банальной проблемы.

Answer 1

[Григорий Кутарев]

CSS так не умеет. Нужно либо делать хак через js, либо, если нужно только фон, эмулировать как-то так

.text-wrapper {
  border: 1px solid red;
  overflow: hidden;
}
p {
  background-color: lightblue;
  display: inline;
  box-shadow: -1em 1em 0 1em lightblue;
}