如何让HTML的li元素像段落中的句子一样自动换行？

要让列表元素（<li>）像段落中的句子一样自动换行，可通过以下CSS配置结合HTML结构实现，当<li>内容宽度超出<ul>容器时会自动折行：

CSS 代码 #

ul {
    width: 100%;
    text-decoration: none;
}

li, h2 {
    display: inline-block;
    word-wrap: break-word;
}

li::after {
    content: '\00a0 '; /* 在列表元素之间添加空格 */
}

HTML 代码 #

<ul>
    <li>
        <h2>Hello!</h2>
    </li>
    <li>
        <h2>How are you?</h2>
    </li>
    <li>
        <h2>Today?</h2>
    </li>
    <li>
        <h2>This has to be a really long line to show you what I mean, so although I tried to be brief, it turned into a longer discussion.</h2>
    </li>
</ul>

核心逻辑说明 #

• 将<li>和<h2>设置为inline-block，既允许元素在同一行排列，又支持基于容器宽度的自动换行
• word-wrap: break-word确保长单词或超长连续文本能在容器边界处拆分换行
• 通过li::after添加空格，避免相邻列表元素之间紧密贴合

内容的提问来源于stack exchange，提问作者interwebjill