CSS 响应式文本内容

Question

我有这个按钮，其中包含升级我的帐户。

我想有一条规则说对于小于 990px​​ 的屏幕，它应该是 Upgrade 而不是(因为 Upgrade my account 太长了)...

我能否在 CSS 中清楚地实现这一点(而不是通过添加两个版本并让一个 display: none 而另一个显示...)？

我试过了

  @media(max-width: 990px) {
    .navbar-btn {
      content: 'Upgrade'
    }
  }

但它不会工作...

谢谢

Answer 1

使用span 并根据屏幕尺寸显示/隐藏它:

HTML

<button class='navbar-btn'>
    Upgrade<span> my Account</span>
</button>

CSS:

@media(max-width: 990px) {
    .navbar-btn span {
        display:none;
    }
}

JSFiddle