如何阻止<li>换行？需截断最后可见<li>内的长文本

1. 核心思路 #

• 给<ul>设置弹性布局，强制所有<li>在同一行排列；
• 控制前几个<li>不被压缩，保证宽度稳定；
• 让最后一个<li>占据容器剩余空间，并添加文本截断样式。

2. 完整代码示例 #

HTML（无需修改原结构）

<ul>
  <li><div>long text 1</div></li>
  <li><div>long text 2</div></li>
  <li><div>long text 3</div></li>
  <li><div>long text 4 is a very long text that needs to be truncated</div></li>
</ul>

CSS

ul {
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none; /* 可选：移除默认列表符号 */
}

ul > li {
  flex-shrink: 0; /* 前几个li不被压缩，保持原有宽度 */
  margin-right: 12px; /* 可选：添加项之间的间距 */
}

ul > li:last-child {
  flex-grow: 1; /* 占据容器剩余所有空间 */
  margin-right: 0;
}

/* 给最后一个li内的文本添加截断样式 */
ul > li:last-child div {
  white-space: nowrap; /* 文本强制不换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

效果说明 #

• 所有<li>会始终保持在同一行，不会因容器宽度不足换行；
• 最后一个<li>自动填充剩余空间，内部文本超出时自动显示省略号；
• 如果需要前几个<li>固定宽度，直接给它们添加width属性即可（比如width: 100px），不影响整体效果。

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