本文详解如何仅用原生 HTML/CSS 实现 Flex 容器内长文本元素的响应式自适应布局，通过 flex: 1、overflow: hidden 与 text-overflow: ellipsis 协同作用，确保文本安全截断、不撑破容器，适配不同屏幕宽度（含横竖屏切换）。
本文详解如何仅用原生 html/css 实现 flex 容器内长文本元素的响应式自适应布局，通过 `flex: 1`、`overflow: hidden` 与 `text-overflow: ellipsis` 协同作用，确保文本安全截断、不撑破容器，适配不同屏幕宽度（含横竖屏切换）。
在 Flex 布局中，当容器内存在固定宽/高元素（如 .left 和 .icon）与一个承载长文本的中间区域（如 .right）时，若未正确设置弹性行为，.right 很容易因内容过长而强制拉伸整个容器，或导致文本溢出边界——尤其在移动端横竖屏切换时，父容器宽度动态变化，问题更为突出。
核心解决方案在于三要素缺一不可：
- ✅ flex: 1：为 .right 设置弹性增长/收缩能力，使其自动占据剩余可用空间；
- ✅ overflow: hidden：这是关键前提！text-overflow: ellipsis 仅在块级元素具有明确溢出约束（即 overflow 非 visible）时才生效；
- ✅ white-space: nowrap + text-overflow: ellipsis：强制单行显示并启用省略号截断。
此外，需确保父容器 section 使用 display: flex，且子项无其他干扰性尺寸声明（如 width、min-width），以保障 Flex 的自动计算逻辑正常工作。
以下是完整、可直接运行的示例代码：
section {
display: flex;
border: 3px solid red;
margin: 1em auto;
width: 200px; /* 可替换为 max-width: 100%; 配合媒体查询实现响应式 */
}
/* 演示不同宽度下的表现 */
.wider {
width: 400px;
}
section .left {
background: dodgerblue;
padding: 5px;
color: #fff;
/* 推荐添加 flex-shrink: 0 防止被压缩（可选） */
flex-shrink: 0;
}
section .right {
background: green;
color: #fff;
padding: 5px;
flex: 1; /* 关键：占据剩余空间 */
overflow: hidden; /* 关键：启用 text-overflow */
white-space: nowrap; /* 关键：禁止换行 */
text-overflow: ellipsis; /* 关键：显示省略号 */
}
section .icon {
padding: 5px;
color: #fff;
background: orange;
flex-shrink: 0; /* 推荐：防止图标被压缩变形 */
}<section> <div class="left">Left</div> <div class="right">Right Lots-Of-Text-Data</div> <div class="icon">Icon</div> </section> <section class="wider"> <div class="left">Left</div> <div class="right">Right Lots-Of-Text-Data</div> <div class="icon">Icon</div> </section>
⚠️ 注意事项：
- 若 .right 内容需支持多行省略，text-overflow: ellipsis 不适用（它仅支持单行），此时应改用基于 line-clamp 的方案（需配合 display: -webkit-box 等，兼容性稍弱）；
- 在真实项目中，建议将 width 替换为 max-width: 100%，并结合媒体查询或 vw 单位适配移动设备；
- 所有 Flex 子项默认 min-width: auto，若文本极长仍可能轻微撑开，可显式添加 min-width: 0 到 .right 进一步强化收缩性（现代浏览器推荐补充）。
综上，无需 JavaScript 或第三方库，纯 CSS 即可稳健解决响应式文本溢出问题——关键在于理解 flex、overflow 与 text-overflow 的协同机制，并始终将 overflow: hidden 视为启用省略号的必要条件。
