如何实现text-overflow时按钮与span元素同行显示？

设置text-overflow: ellipsis实现文本溢出省略时，右侧同行的按钮（a标签）出现显示问题。

CSS #

a {
  float: right;
}

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML #

<h1>The ul element</h1>

<ul>
  <li><span>Create a list inside a list (a nested list)</span><a href="">x</a></li>
  <li><span>Create</span><a href="">x</a></li>
  <li><span>Create a list inside a list (a nested list)</span><a href="">x</a></li>
</ul>

使用Flex布局替代float，可完美解决文本省略和按钮显示的冲突：

li {
  display: flex;
  white-space: nowrap;
  align-items: center; /* 可选，让文本与按钮垂直居中 */
}

span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  margin-left: 10px; /* 可选，增加文本与按钮的间距 */
}

原理说明 #

• 将li设为flex容器，让内部元素横向排列
• 给span设置flex:1，使其占据li的剩余空间，同时配置溢出省略规则
• a标签作为独立flex项，会始终固定显示在右侧，不会被文本的省略规则截断

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