Как я могу сделать Div Tighen вокруг обернутого текста, когда ограничения ширины заставляют новую линию? [дублировать] ⇐ CSS

[Anonymous]

В настоящее время у нас есть следующие заголовки категории:

Когда они только одна строка, они хорошо выглядят. Но некоторые дольше и в конечном итоге обертываются. Когда они это делают, они выглядят примерно так:

Обертывание толкает содержащий Div к ограничению ширины, который остается в конец в конце концов, и еще больше в конце концов, и еще больше в конце концов, и еще больше в конце концов. Что я хотел бы, чтобы это затянуть это, так что это выглядит так:

Это выглядит намного чище, но я не уверен, как сделать это органо. Вот что я ищу. Короче говоря, я хотел бы заставить Div обнять его содержимое таким образом, что производит наименьшее количество строк. Если ему нужны 2 строки, я бы хотел, чтобы оно обнимало содержимое как можно больше, не принуждая третьего. Если это 3 строки, я бы хотел, чтобы оно обнимало содержимое как можно ближе, не принуждая четвертого и т. Д. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

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

* {margin: 0; box-sizing: border-box; }
body { font: 1rem/1.4 system-ui, sans-serif; background: hsl(212, 8%, 50%); }

.tooltip {
display: inline-flex;
border-radius: 0.2rem;
color: hsl(82, 46%, 100%);
border: 0.2em solid currentColor;
background-color: hsl(82, 46%, 24%);
padding: 0.2em 0.4em;
font-size: 0.8rem;
max-width: 25em;
width: max-content;
}< /code>
  Short

Suppose I have

Suppose I have a long title

Suppose I have a long title with lots of text.

Suppose I have a long title with lots of big, extraordinary long words

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-a-new-li