Как заставить многострочный элемент абзаца динамически сжиматься по горизонтали, чтобы удалить пробелы? ⇐ CSS

[Anonymous]

Позвольте мне объяснить... Я создаю представление цепочки SMS в формате html. Вот что у меня есть:

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

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
background-color: black;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 2rem;
}

section {
margin: 0 auto;
background-color: white;
max-width: 1080px;
display: flex;
flex-direction: column;
padding: 20px;
}

article {
display: inline-block;
padding: 10px 20px;
border-radius: 30px;
width: fit-content;
max-width: 75%;
}

article p {
margin: 0;
word-wrap: break-word;
}

article.them {
color: black;
background-color: lightgray;
align-self: flex-start;
}

article.me {
color: white;
background-color: darkblue;
align-self: flex-end;
}

/* Smaller margin between consecutive messages from the same sender */
article.me + article.me,
article.them + article.them {
margin-top: 3px;
}

/* Standard margin between different senders */
article.me + article.them,
article.them + article.me {
margin-top: 20px;
}

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

Lorem ipsum, dolor sit amet.


Lorem ipsum.



Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Nostrum tempore excepturi dolore nam? Odio architecto
tempora maiores corrupti nihil autem necessitatibus natus
consequuntur adipisci hic nisi quaerat voluptate, incidunt
beatae?




Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellat officia delectus sequi quo quas!

Когда в текстовом пузырьке всего несколько слов, он сжимается до нужного размера. ширина. Это связано с тем, что статья настроена на сжатие до ширины содержимого с помощью display: inline-block; и width: fit-content;. Но в случае с многострочными текстовыми пузырьками пузырь всегда будет максимальной ширины (75 % ширины раздела). Это связано с тем, что абзац будет занимать всю разрешенную ширину, несмотря на то, что строка разрывается раньше, чтобы слова оставались вместе. Это оставляет немного пустого пространства справа от многострочных текстовых пузырей, в зависимости от ширины вашего экрана. Я хочу, чтобы элемент абзаца уменьшился по ширине, чтобы удалить лишние пробелы, оставшиеся после разрыва строки. Есть идеи, возможно ли это с помощью CSS?

Подробнее здесь: https://stackoverflow.com/questions/790 ... tally-to-r