Allow me to elaborate... I am constructing a visual representation of an SMS conversation using HTML. Here is the current setup:
@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;
}<body>
<section>
<article class="them">
<p>Lorem ipsum, dolor sit amet.</p>
</article>
<article class="me">
<p>Lorem ipsum.</p>
</article>
<article class="me">
<p>
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?
</p>
</article>
<article class="them">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellat officia delectus sequi quo quas!
</p>
</article>
</section>
</body>Single line text bubbles adjust width accordingly, but multiline bubbles always stretch to maximum width due to paragraph settings. Can CSS make paragraphs shrink in width for multiline bubbles and remove excess white space caused by line breaks?