调整浏览器大小时，如何在 DIV 中隐藏部分 HTML 文本？使用 CSS)

Question

随着浏览器缩小，即在 iPad/phone 等上，我想隐藏特定文本。我知道我可以使用媒体查询来完全隐藏 'text bar' 但是如果我只想删除 'Our Profits Help Support UK Charities' 那么当有人使用 iPad 或phone？下面是 HTML 和 CSS

HTML

<div class="topnav">
  <a class="active" href="#home">Why Buy From Us?></a>
  <a href="#news">Free Shipping On Orders Over £100</a> 
  <a href="#contact">Our Profits Help Support UK Charities</a>
  <a href="#about">A True Customer Focused Experience</a>
</div>

CSS

.topnav {
  background-color: #333;
  overflow: hidden;
  margin: auto;
  text-align: center; 
}
.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 100%;
  margin: auto;
}

媒体查询

@media only screen and (max-width: 1226px) {
  .topnav {
    display: none !important;
  }
}
@media only screen and (max-width: 1226px) {
  .topnav a {
    display: none !important;
  }
}

Answer 1

您可以使用元素的属性来定位元素以应用样式。

https://www.w3schools.com/css/css_attribute_selectors.asp

为了回答您的问题，我认为您可以在正在申请 iPad 的 css 中执行以下操作：

a[href="#contact"] {
  display: none
}

调整浏览器大小时，如何在 DIV 中隐藏部分 HTML 文本？使用 CSS)

How to hide a portion of HTML text within a DIV when adjusting browser size? using CSS)

html

css

responsive