CSS响应文本内容

Question

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

我希望有一条规则，对于小于990像素的屏幕，它应该是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

Answer 2

见

的 Fiddle

content属性仅适用于:before和:after psuedo元素，这也意味着您将把内容（文本）放入CSS ...我不会倾向于推荐..

HTML

<div class='navbar-btn'></div>

CSS

.navbar-btn {
    position:relative;
}
.navbar-btn:after {
    position:absolute;
    left:0;
    content:'Upgrade my Account';
}
@media(max-width: 990px) {
    .navbar-btn:after {
        content:'Upgrade';
    }
}

Answer 3

说你的html在下面的

<div class="navbar">
    <span>Upgrade my account</span>
</div>

您的媒体查询可以

@media(max-width: 990px) {
    .navbar:before {
      content: 'Upgrade'
    }
    .navbar > span {display:none;}
}

Example

Answer 4

我会建议我在demo

中做的事情

CSS：

@media(min-width: 990px) {
  .navbar-btn:after {
    content: ' account'
  }
}

HTML：

<button class='navbar-btn'>Upgrade</button>