I am looking to format text list elements in a way that they wrap like sentences within a paragraph. Here is the accompanying HTML & CSS code snippet that demonstrates how li element behaves when it exceeds the width of the ul container.
ul {
width: 100%;
text-decoration: none;
}
li, h2 {
display: inline-block;
word-wrap: break-word;
}
li::after {
content: '\00a0 '; /* To give a space between li elements */
} <ul>
<li>
<h2>Hello!</h2>
</li>
<li>
<h2>How are you?</h2>
</li>
<li>
<h2>Today?</h2>
</li>
<li>
<h2>This example is intentionally long to visually demonstrate how line wrapping works based on container width.</h2>
</li>
</ul>