flex布局中图片左、文字右结构需设父容器display: flex、align-items: flex-start，封面图容器用flex: 0 0 120px+overflow: hidden，文字区必加min-width: 0+overflow: hidden才能使text-overflow: ellipsis或-webkit-line-clamp生效。
flex布局中图片左、文字右的常见结构怎么写
直接用 display: flex + flex-direction: row 就能实现，但关键在子元素宽度控制和文字截断配合。很多人写了 flex 却发现文字撑开容器、换行错乱或截断失效，问题通常出在没设 min-width: 0 或忽略了 white-space 的继承链。
实操建议：
- 父容器加
display: flex和align-items: flex-start（避免文字基线对齐导致视觉偏移） - 封面图容器设固定宽高或
flex: 0 0 120px（防止拉伸），记得加overflow: hidden防图片溢出 - 文字区必须加
min-width: 0—— 这是截断生效的前提，否则 flex item 默认最小宽度为内容宽度，text-overflow: ellipsis直接失效 - 标题用
font-weight: bold+ 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 摘要用两行截断：需配合
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;，且父级不能有height固定值
为什么文字截断在flex里经常不生效
根本原因是 flex item 的默认 min-width: auto 会阻止内容收缩，哪怕你写了 overflow: hidden，浏览器仍优先保证内容完整显示。这不是 bug，是 flex 布局规范行为。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 标题或摘要文字直接换行，而不是出现省略号
- 整个文字区被“挤”到下一行，破坏左右结构
- 在 Safari 上
-webkit-line-clamp完全没反应（缺了display: -webkit-box或父级有overflow: hidden冲突）
解决要点：
- 文字区外层 div 必须同时有
min-width: 0和overflow: hidden - 两行截断的元素不能是
inline或inline-block，必须是block或-webkit-box - 避免在文字区上层元素设
text-overflow，它只对块级、溢出隐藏、非换行的单行元素有效
封面图尺寸不统一时怎么保持布局稳定
用户上传的封面图宽高比千差万别，硬设 width/height 会导致拉伸或留白。用 object-fit: cover 是最直接解法，但要注意容器本身得有明确尺寸约束。
使用场景：
- 博客卡片流中每个 item 封面图尺寸不一致
- 响应式下需要在不同断点保持图文比例协调
参数差异与影响：
-
object-fit: cover→ 裁切居中显示，适合强调主体，但可能切掉边缘信息 -
object-fit: contain→ 等比缩放，留白多，适合 Logo 类图，但小图会显得空 - 千万别只给
img设width: 100%，必须配合height: 100%和object-fit，否则 fallback 行为不可控
示例关键样式：
div.cover { width: 120px; height: 80px; }
div.cover img { width: 100%; height: 100%; object-fit: cover; }
移动端适配时左右结构容易崩的原因
小屏下如果还坚持「图左文右」，文字区宽度会被压得太窄，两行截断常只剩一个字，阅读体验差。这不是代码写错了，而是交互逻辑该调整。
实操建议：
- 用媒体查询在
max-width: 480px下切回「图上文下」：改flex-direction: column，并重置文字区min-width - 图上文下时，封面图可设
width: 100%，但需加aspect-ratio: 16/9（或用 padding-top 技巧兼容老浏览器） - 别依赖
vw控制图宽——iOS Safari 对vw在地址栏收起/展开时有重绘延迟，导致布局跳动
容易被忽略的一点：flex 容器的 gap 在旧版 Safari 需要 -webkit-gap，但更稳妥是用 margin 控制图文间距，尤其当需要支持 iOS 14.5 以下时。
