CSS 响应式文本内容

Question

我有这个按钮，其中包含Upgrade my account.

我想有一个规则，说对于小于 990 像素的屏幕，它应该是Upgrade（因为Upgrade my account太长了）......

我可以在 CSS 中干净地实现这一点（不是通过添加两个版本并display: none显示另一个版本......）？

我试过

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

但它不会工作...

谢谢

Answer 1

使用 aspan并根据屏幕大小显示/隐藏它：

HTML

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

CSS：

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

JSFiddle