核心是按屏幕宽度智能截断或折叠文字，而非简单隐藏；推荐用text-overflow+媒体查询实现单行省略，或data-label伪元素堆叠展示，兼顾可读性、SEO与无障碍。
在 H5 移动端用媒体查询隐藏过长文字摘要，核心不是“隐藏”，而是“按屏幕宽度智能截断或折叠”，避免生硬消失影响可读性与体验。直接 display: none 会丢失信息，也不利于 SEO 和辅助访问。
用 text-overflow + 媒体查询控制截断时机
这是最轻量、兼容性最好的方式，适合标题、短摘要类文本（如新闻卡片、商品副标题）：
- 给文字容器设固定逻辑宽度（如 max-width: 100%），并强制单行：
white-space: nowrap; overflow: hidden; - 添加省略号：
text-overflow: ellipsis;，需配合display: block或inline-block - 在小屏断点内启用该效果，大屏可取消限制，展示完整内容：
@media (max-width: 414px) { .summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80vw; } } @media (min-width: 415px) { .summary { white-space: normal; overflow: visible; text-overflow: clip; } }
用 display 控制整段摘要的显隐（慎用）
适用于非关键、纯装饰性或可替代的信息（如冗余副标题、运营话术），且确认用户无需阅读：
- 定义语义化类名，如
.summary-mobile-only，只在移动端显示；或.summary-desktop-only，在小屏时隐藏 - 媒体查询中统一控制，避免每个元素单独写断点：
@media (max-width: 414px) { .summary-desktop-only { display: none !important; } } @media (min-width: 415px) { .summary-mobile-only { display: none !important; } } - 加
!important是为覆盖组件内部可能写的高优先级样式，但前提是该摘要确实不参与交互或无障碍流程
结合 data-label 实现响应式堆叠（推荐用于表格/列表摘要）
当摘要属于表格列或卡片信息流，小屏空间不足时，可把文字“转成标签”堆叠显示，比单纯隐藏更友好：
- HTML 中用
data-label="摘要："标记语义：<div class="item"> <span data-label="摘要：">这是一段很长的活动说明文字……</span> </div>
- CSS 在小屏下用伪元素+绝对定位把 label 提出来：
@media (max-width: 414px) { .item span::before { content: attr(data-label); font-size: .12rem; color: #666; } .item span { display: block; padding-left: 1.2em; } } - 这样既保留全部信息，又避免横向溢出，也适配屏幕阅读器（label 可被读出）
注意避开常见坑
别让响应式变成“不可见式”：
- 不用
visibility: hidden替代display: none—— 它仍占位，可能撑开容器导致布局异常 - 别在 JS 中监听 resize 动态增删
hidden类 —— 媒体查询原生高效，JS 切换易丢帧、难调试 - 如果摘要含重要操作提示（如“仅剩2小时”），隐藏前务必加
aria-live="polite"或 fallback 提示，确保动效/弱视用户不漏关键信息
