卡片内容溢出不能仅靠overflow:hidden解决，根本原因是布局上下文、尺寸继承链和渲染行为未对齐：父容器缺宽高约束、子元素用固定单位、white-space未作用于正确元素；overflow必须作用于直接包裹溢出内容的块级元素。
卡片内容溢出不是加个 overflow: hidden 就能解决的，根本原因是布局上下文、尺寸继承链和渲染行为没对齐——比如父容器没设宽高约束、子元素用了固定单位、或 white-space 没落到真正起作用的元素上。
为什么 overflow: hidden 加了也不生效
常见错误是只写在最外层 <div class="card"> 上，但溢出实际发生在内部某个子元素里：
<ul><li><code><pre class="brush:php;toolbar:false;"></code> 或 <code><code></code> 默认 <code>white-space: pre</code>，会无视父级 <code>overflow</code></li>
<li>Flex 项目中用了 <code>flex: 1</code> 却没加 <code>min-width: 0</code>，文本强行撑开容器</li>
<li>图片没配 <code>max-width: 100%</code> 和 <code>height: auto</code>，<code>overflow</code> 对它完全无效</li>
<li><code>text-overflow: ellipsis</code> 失效，90% 是因为该元素没有明确宽度限制（<code>width</code>、<code>max-width</code> 或 <code>flex-basis + min-width: 0</code>）</li>
</ul>
<H3>卡片内部文字截断要分单行和多行处理</H3>
<p>单行标题用 <code>text-overflow: ellipsis</code> 是够用的，但必须满足三个硬条件：</p>
<ul>
<li><code>display</code> 是 <code>block</code> 或 <code>inline-block</code>（<code>inline</code> 不支持）</li>
<li><code>white-space: nowrap</code></li>
<li>父容器有明确宽度（不能靠 <code>flex-grow</code> 算出来，得是 <code>width</code> 或 <code>max-width</code>）</li>
</ul>
<p>多行描述推荐用 <code>-webkit-line-clamp</code>：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'>.card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}</pre>
<p>注意：父容器不能设 <code>height，否则会冲突；且 display: -webkit-box 是强制前提。
图片和绝对定位是卡片溢出的两大隐形推手
图片必须包一层 overflow: hidden 容器，再设：
img {
width: 100%;
height: auto;
object-fit: cover;
}
直接给 img 加 border-radius 会裁剪内容，不是圆角头像的正确解法。
禁用 position: absolute 布局按钮或标签——它脱离文档流，Grid/Flex 高度算不准，Safari 下尤其容易错位。
卡片本身别设死 height，靠 flex-direction: column + flex-grow: 1 让内容区域吸满空间。
真正容易被忽略的是：溢出问题往往不是单一 CSS 属性能兜住的，而是从父容器宽度约束、子元素弹性行为、到文本换行策略，整条链路都要对齐。漏掉任意一环，都可能在某类设备或内容长度变化时突然崩掉。
