Flex Row使用nowrap时，避免右侧动态元素被挤出屏幕的方法

这个场景我太熟悉了！要实现一行内文本过长截断、右侧动态元素（图片/emoji）紧贴屏幕边缘不被挤出，核心是利用Flex的弹性分配规则和文本截断的CSS属性，不用给右侧元素设固定宽度也能搞定。

核心思路 #

父容器用flex: nowrap强制不换行，然后通过Flex的flex属性分配空间：

• 文本容器：占据剩余所有可用空间，同时内部设置文本截断规则
• 右侧动态元素：保持自身固有宽度，不被压缩、不换行

完整代码示例 #

HTML结构

<div class="flex-container">
  <div class="text-content">
    这里是可能非常长的文本内容，比如Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, quibusdam!
  </div>
  <span class="right-element">😎</span>
  <!-- 右侧元素也可以是图片：<img src="your-image.png" class="right-element"> -->
</div>

CSS样式

.flex-container {
  display: flex;
  flex-wrap: nowrap; /* 强制一行布局 */
  align-items: center; /* 垂直居中，可选 */
  width: 100%; /* 确保容器占满可用宽度，比如父元素是body的话就占满屏幕 */
  /* 可选：给容器加个边框方便看效果 */
  border: 1px solid #eee;
  padding: 8px;
}

.text-content {
  flex: 1; /* 关键：占据剩余所有可用空间 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
  margin-right: 8px; /* 和右侧元素留间距，可选 */
}

.right-element {
  flex-shrink: 0; /* 关键：禁止右侧元素被压缩，保持自身宽度 */
  /* 如果是图片可以加个max-height控制大小，比如：max-height: 24px; */
}

为什么这样管用？ #

• flex: 1给文本容器：相当于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，意思是它会优先占据父容器减去右侧元素宽度后的所有剩余空间，刚好满足文本截断的宽度需求。
• flex-shrink: 0给右侧元素：告诉Flex布局“这个元素不能被压缩”，所以它会一直保持自己的固有宽度（emoji或图片的原始/设置的尺寸），不会被文本挤出去。
• 文本容器的white-space: nowrap + overflow: hidden + text-overflow: ellipsis组合，确保文本在容器宽度内超出就截断，不会换行打乱布局。

特殊情况处理 #

如果右侧是多个动态元素（比如多个emoji或图片），只要把它们放在同一个容器里，给这个容器加flex-shrink: 0就行，一样能保持整体宽度不被压缩。

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