Сжать DIV до текста, завернутого до максимальной ширины? ⇐ CSS

[Anonymous]

Сжать элемент div в текст довольно просто. Но если текст переносится на вторую строку (или более) из-за максимальной ширины (например), размер DIV не уменьшается до вновь перенесенного текста. Он по-прежнему расширяется до точки останова (в данном случае значения максимальной ширины), что приводит к появлению достаточного количества полей в правой части DIV. Это проблематично, если требуется центрировать этот DIV, чтобы обернутый текст отображался по центру. Это не так, потому что DIV не сжимается до нескольких строк текста, которые переносятся. Одним из решений является использование выровненного текста, но это не всегда практично, и результаты могут быть ужасными из-за больших промежутков между словами.
Я понимаю, что не существует решения, позволяющего сжать DIV до обернутого текста в чистом CSS. Итак, мой вопрос: как этого добиться с помощью Javascript?
Этот jsfiddle иллюстрирует это: jsfiddle. Два слова едва переносятся из-за максимальной ширины, однако DIV не сжимается до вновь обернутого текста, оставляя неприятный правый край. Я хотел бы устранить это и изменить размер DIV в соответствии с обернутым текстом, предположительно с использованием Javascript (поскольку я не верю, что решение существует в чистом CSS).

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

.shrunken {
text-align: left;
display: inline-block;
font-size: 24px;
background-color: #ddd;
max-width: 130px;
}

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

Shrink Shrink

Подробнее здесь: https://stackoverflow.com/questions/145 ... -max-width