响应地更改<button>元素的文本

Question

我想知道当屏幕尺寸低于400px时，是否可以通过css更改按钮的文本。现在我有类似<button>Next</button>的内容，我想将其更改为<button>-></button>。这可能吗？

Answer 1

HTML

<button id="button-one" name="button">NEXT</button>
<button id="button-two" name="button">-&gt;</button>

CSS

#button-two { display: none; }

@media (max-width: 400px) {
    #button-one { display: none; }
    #button-two { display: inline; }
}

DEMO：http://jsfiddle.net/ujag5eya/1/

Answer 2

另一种替代方法是使用css content示例

<强> HTML

<button id="button-one" name="button"></button>

<强> CSS

#button-one::after{
  content:"NEXT"
}
@media (max-width: 400px) {
  #button-one::after{
    content:"->"
  }
}

<强> Codepen http://codepen.io/noobskie/pen/ojgOWB

这是Chris Coyier撰写的一篇文章

https://css-tricks.com/swapping-out-text-five-different-ways/