本文介绍通过 CSS 控制无序列表（<ul>）在水平布局中不换行的完整方案，重点解决 inline-block 导致的自动折行问题，并结合 white-space: nowrap、overflow: hidden 与 text-overflow: ellipsis 实现末项内容智能截断。
本文介绍通过 css 控制无序列表（`
- `）在水平布局中不换行的完整方案，重点解决 `inline-block` 导致的自动折行问题，并结合 `white-space: nowrap`、`overflow: hidden` 与 `text-overflow: ellipsis` 实现末项内容智能截断。
在构建水平导航栏、标签页或横向滚动菜单时，开发者常使用 <ul><li> 结构配合 display: inline-block 实现内联排列。但该方式存在一个典型问题：当容器宽度不足时，浏览器会将整个 <li> 元素整体换行，而非隐藏或截断超长内容——这与响应式设计中“保持单行、末项省略”的需求相悖。
要彻底避免换行并实现优雅截断，关键在于将换行控制权从 <li> 转移到 <ul> 容器层级，并通过内联流（inline flow）统一管理子元素。以下是推荐的 CSS 解决方案：
ul {
margin: 0;
padding: 0;
white-space: nowrap; /* 禁止容器内任何换行（包括空格、换行符） */
overflow: hidden; /* 隐藏溢出内容（必要前提） */
text-overflow: ellipsis; /* 仅对单行文本生效：末尾显示省略号 */
font-size: 25px; /* 建议显式设置字体大小，避免缩放干扰 */
/* 注意：必须设置固定宽度或 max-width 才能触发 overflow/ellipsis */
}
ul > li,
ul > li > div {
display: inline; /* 关键！使 li 和其内部 div 成为内联元素，消除空白间隙影响 */
}
ul > li {
padding: 0 10px; /* 水平内边距维持视觉间距 */
}同时，HTML 结构需保持简洁，避免 <li> 内部存在块级元素（如默认 div）破坏内联流：
<ul> <li><div>long text 1</div></li> <li><div>long text 2</div></li> <li><div>long text 3</div></li> <li><div>very very loooooong text content</div></li> </ul>
⚠️ 重要注意事项：
- text-overflow: ellipsis 仅对单行文本有效，且要求元素同时满足：overflow: hidden、white-space: nowrap、display: block 或 inline-block（但此处我们改用 inline 更稳妥）；
- 若 <ul> 未设置明确宽度（如 width: 100%、max-width: 600px），overflow: hidden 将无实际效果；
- display: inline 可消除 <li> 默认的块级行为，避免因 inline-block 引入的空白字符（换行/空格）导致意外间隙；若需保留垂直对齐能力，可改用 display: inline-flex 并配合 align-items: center；
- 如需支持多行省略（非本例需求），需借助 -webkit-line-clamp 或 JavaScript 方案，text-overflow: ellipsis 不适用。
综上，该方案以语义清晰、零 JS、高兼容性（支持 IE11+）的特点，精准解决了水平列表防换行 + 末项截断的核心诉求。实际项目中，建议配合 min-width 或媒体查询动态调整容器宽度，确保在不同视口下均能稳定呈现预期效果。
