Условный разрыв строки только в том случае, если не произойдет «естественного» разрыва. ⇐ CSS

[Anonymous]

У меня довольно длинный текст внутри элемента div собственного размера. По визуальным причинам я бы хотел, чтобы элемент div прерывался в заданной точке, но только тогда, когда «естественный» разрыв строки не происходит «до» этой точки:


Я мог бы добиться этого, добавив
, размещение текста в нескольких div и т. д., но Я не нашел способа игнорировать этот разрыв, когда элемент div сжимается ниже точки, в которой он естественным образом прерывается «до» этой предпочтительной точки разрыва:


Есть ли какой-нибудь способ добиться этого с помощью чистого CSS и HTML?
Пример code
Вот пример со «статическим» разрывом строки через
, который показывает разрыв строки в правильной позиции, когда элемент div очень широкий, но не работает должным образом, когда элемент div сжимается (второй снимок экрана выше):

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

.parent {
display: flex;
font-family: Inter;
font-size: 18px;
}

.content {
background: yellow;
padding: 8px;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non orci in nunc venenatis luctus et eget mauris.
Pellentesque nec ante dignissim, malesuada tortor ac, rhoncus ante.

Площадка Codepen
Дополнительное примечание
Я специально ищу решение, которое не требует каких-либо фиксированных размеров, таких как max-width div, медиа-запросы и т. д., поскольку все они будут привязаны к используемый шрифт, размер шрифта, уровень масштабирования браузера и т. д. и могут сломаться, например. когда пользователь переопределяет шрифт (размер) в настройках браузера и т. д.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ould-occur