CSS：当文本不适合时，如何隐藏div？

Question

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

我已经尝试过使用＆＃34; text-overflow：hidden;＆＃34;和＆＃34;溢出：隐藏;＆＃34;但那些似乎不起作用，或者我以错误的方式使用它们。

这是我的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;
    }
}

Answer 2

使用媒体标记进行响应式设计，例如：

 @media screen and (max-width: 420px) { // your screen widths
  div.credits {
     overflow: hidden;
  }
 }

Answer 3

好吧，如果你真的想要隐藏所有不适合的项目，只需在导航（容器）中设置静态高度并设置overflow:hidden;

或者，您可以使用省略号溢出：

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: some width;

Answer 4

如果未声明div的大小，那么它只会扩展，使溢出：隐藏;无用的。

如果可以，请在div上添加高度和宽度％。