H5 中媒体查询怎么在移动端隐藏过长的文字摘要-H5教程-PHP中文网

核心是按屏幕宽度智能截断或折叠文字，而非简单隐藏；推荐用text-overflow+媒体查询实现单行省略，或data-label伪元素堆叠展示，兼顾可读性、seo与无障碍。

h5 中媒体查询怎么在移动端隐藏过长的文字摘要

在 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 控制整段摘要的显隐（慎用）

适用于非关键、纯装饰性或可替代的信息（如冗余副标题、运营话术），且确认用户无需阅读：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

定义语义化类名，如 .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;
  }
}