如何在页面宽度小于特定值时隐藏文本？响应式布局适配需求

嘿，这个需求用CSS的媒体查询就能轻松搞定，我给你一步步拆解清楚：

媒体查询是响应式设计的核心工具，能根据屏幕宽度等条件触发不同的CSS规则，完美匹配你“窄屏隐藏指定文本”的需求。

步骤1：给目标文本加专属类名 #

先给你想要隐藏的那部分文本加一个类名，比如hide-on-small-screen，这样后续CSS能精准定位它：

<!-- 举个实际布局的例子 -->
<div class="site-header">
  <img src="your-logo.png" alt="网站Logo" class="logo">
  <h1 class="site-title">
    我的网站 <span class="hide-on-small-screen">（专注于XX领域）</span>
  </h1>
</div>

步骤2：编写媒体查询规则 #

接下来在CSS里写媒体查询，设定当屏幕宽度小于你指定的阈值（比如768px，这个数值你可以根据自己的设计需求调整）时，隐藏目标元素：

/* 默认状态：所有屏幕下都显示文本 */
.hide-on-small-screen {
  display: inline; /* 让文本和主标题保持在同一行 */
}

/* 当屏幕宽度 ≤ 768px 时，触发隐藏规则 */
@media (max-width: 768px) {
  .hide-on-small-screen {
    display: none; /* 完全隐藏元素，不占据页面空间 */
    /* 如果你想隐藏内容但保留元素位置，可以换成 visibility: hidden; */
  }
}

配合你现有布局的优化 #

如果你的标题和Logo是用Flex布局实现的（宽屏并排、窄屏换行），可以把隐藏规则和布局规则整合在一起：

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 给Logo和标题留些间距 */
}

/* 窄屏时让Flex容器换行，标题移到Logo下方 */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start; /* 标题左对齐，可选调整 */
  }
  
  .hide-on-small-screen {
    display: none;
  }
}

小提示 #

• 断点值（768px）可以根据你的设计稿灵活调整，常见的还有600px、992px等
• display: none会让元素彻底消失，不占空间；如果需要保留位置但隐藏内容，用visibility: hidden或opacity: 0更合适

这样就能实现你想要的效果：宽屏时标题和Logo并排显示全部文本，窄屏时标题自动移到Logo下方，同时隐藏你指定的那部分文本。

内容的提问来源于stack exchange，提问作者Stanly