html - CSS:当文本不适合时如何隐藏 div？

Question

当我的网站在手机等宽度较小的屏幕上显示时，导航栏下方有一个div float ，所以我想隐藏它。我怎样才能使用纯 CSS 做到这一点？

我已经尝试过一些方法，比如使用“text-overflow: hidden;”和“溢出:隐藏；”但这些似乎不起作用，或者我以错误的方式使用它们。

这是我的 HTML:

<div class="credits">
  <span class="nav">
    <a class="credits" href="http://github.com/jvnknvlgl/website">Made by jvnknvlgl</a>
  </span>
</div>

以及对应的CSS:

div.credits {
  float: right;
}

span.nav {
  line-height: 56px;
  display: inline-block;
  vertical-align: middle;
}

a.credits {
  font-family: 'Roboto', sans-serif;
  font-size: large;
  color: grey;
  text-decoration: none;
}

Answer 1

一个快速的媒体查询就足够了。在你的 CSS 之后添加:

@media screen and (max-width: 420px) { // adjust the width for your needs
    div.credits {
        display: none;
    }
}