）像段落中的单词一样自然换行
" />
本文介绍如何通过 CSS 调整 <li> 和其子元素（如 <h2>）的显示方式，使列表内容在容器宽度受限时按文本流自动折行，而非强制独占一行，从而实现类段落式的紧凑、连续排版效果。
本文介绍如何通过 css 调整 `
`）的显示方式，使列表内容在容器宽度受限时按文本流自动折行，而非强制独占一行，从而实现类段落式的紧凑、连续排版效果。
在标准语义化 HTML 中，<ul> 和 <li> 默认以块级方式呈现，每个 <li> 占据独立一行；即使内部嵌套了 <h2> 等标题元素，整体仍保持“垂直堆叠”布局。但有时我们需要更灵活的视觉表现——例如将多个短标签、关键词或微标题水平排列，并在行末自动换行，类似普通段落中单词的流式排版。这种需求常见于标签云、功能亮点列表、响应式导航摘要等场景。
关键在于打破 <li> 的块级行为约束，同时确保其内容（尤其是 <h2>）不破坏行内流。原方案使用 display: inline-block 会导致每个 <li> 始终占据独立的“行内盒子”，无法跨行折断；而将 <h2> 改为 display: inline 后，它不再生成块级框，而是作为纯内联内容参与父级（即 <li>）的文本流渲染。配合 <li> 自身设为 inline（而非 inline-block），整个列表便退化为一串连续的内联元素，由浏览器依据容器宽度自动折行。
以下是推荐的完整实现方案：
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none; /* 移除默认圆点，避免干扰布局 */
}
li {
display: inline;
margin: 0;
padding: 0;
}
li h2 {
display: inline; /* 核心：消除 h2 的块级特性 */
font-size: 1rem;
font-weight: bold;
margin: 0;
line-height: 1.4;
}
li::after {
content: '\00a0 '; /* 不间断空格，保证 li 间有间距 */
}<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> 子元素将作为连续文本流渲染；
- 当行宽不足时，整组内容（包括长文本 <h2>）会在词间自然折行，而非将整个 <li> 推至下一行；
- li::after 使用 Unicode 不间断空格（\00a0）替代普通空格，防止行尾孤立空格被截断。
⚠️ 注意事项：
- 避免在 <li> 内使用 margin 或 padding（尤其左右方向），否则可能破坏内联流的紧凑性；如需间距，优先通过 font-size、line-height 或 letter-spacing 微调；
- 若需点击区域或悬停反馈，建议为 <li> 添加 cursor: pointer 并用 JavaScript 绑定事件，而非依赖伪类（因 inline 元素对 :hover 的支持虽广泛，但交互热区较窄）；
- 语义权衡：此方案牺牲了 <li> 的块级语义完整性，若内容具备明确层级或需无障碍阅读支持，应评估是否更适合改用 <span> + ARIA 标签，或采用 Flexbox/Grid 的现代布局替代。
总结而言，display: inline 是实现“列表项段落化换行”的轻量级解法——无需 JavaScript，兼容性好（支持所有现代浏览器及 IE9+），且代码简洁可控。在强调视觉流动性与空间效率的 UI 场景中，值得作为标准布局策略之一纳入工具箱。
