父容器宽度100%，两子元素自适应宽度并实现溢出省略的纯CSS方案咨询

可以通过CSS Flexbox配合文本溢出属性实现该需求，无需JavaScript。以下是完整实现方案：

完整代码示例 #

HTML结构 #

<div class="parent">
  <div class="child left">Text from left</div>
  <div class="child right">Text from right that might be very long and needs ellipsis when overflow</div>
</div>

CSS样式 #

.parent {
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.child.left {
  flex-shrink: 0;
  margin-right: 8px; /* 可选：调整左右子元素间距 */
}

.child.right {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

关键属性说明 #

• .parent：
  • display: flex：让两个子元素在同一行排列
  • align-items: center：保证子元素垂直居中，整体高度限制为一行文本高度
  • white-space: nowrap：强制所有文本不换行，确保布局始终为单行
• .child.left：
  • flex-shrink: 0：禁止左侧子元素被压缩，始终保持自身内容所需的宽度
• .child.right：
  • flex: 1：占据父容器剩余的所有可用空间
  • overflow: hidden：隐藏超出容器的文本内容
  • text-overflow: ellipsis：将溢出文本替换为省略号
  • white-space: nowrap：确保文本不换行，触发省略号效果

效果验证 #

• 当两个子元素总宽度小于父容器时，右侧子元素会自适应内容宽度，与左侧同行完整显示
• 当右侧文本过长导致总宽度超过父容器时，右侧文本会自动截断并显示省略号，整体高度保持一行文本高度

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