CSS Flex布局下设置第三列宽度至页面末端且不换行的方法

要实现Flex布局中第三列（.harbor）占满页面剩余空间且长文本不换行，需要调整Flex容器子项的空间分配规则，并确保文本元素的换行行为被完全禁止，具体步骤如下：

1. 固定前两列的宽度空间 #

首先确保前两列（.gate-type-wrapper和.traffic-direction-wrapper）不会被压缩，保持自身内容宽度，这样第三列才能占据所有剩余空间：

.gate-type-wrapper, .traffic-direction-wrapper {
  flex-shrink: 0; /* 禁止这两列被压缩变形 */
  margin-right: 1.5rem; /* 可选：增加列间距，提升视觉舒适度 */
}

2. 修改.harbor的Flex属性与文本规则 #

移除width:100%，改用flex:1让它自动填充剩余空间，同时强化文本不换行的规则：

.harbor {
  flex: 1; /* 占据Flex容器内所有未被占用的空间 */
  min-width: 7.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center; /* 可选：让内部元素垂直居中，与其他列保持对齐 */
}

/* 确保内部文本元素彻底禁止换行 */
.harbor-type-label span {
  white-space: nowrap;
}

原理说明 #

• flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写，它会让.harbor优先占据Flex容器中未被其他子项占用的空间，避免了width:100%可能带来的溢出或换行问题。
• flex-shrink:0 阻止前两列被压缩，保证它们的内容布局稳定。
• 多层级的white-space: nowrap确保从.harbor到内部文本元素都不会触发自动换行，超出部分通过text-overflow: ellipsis显示省略号，同时你代码中设置的:title属性可让用户通过鼠标悬停查看完整文本。

内容的提问来源于stack exchange，提问作者Chan Yoong Hon