媒体查询 - 更改<h1>内容？

Question

我试图通过媒体查询在这里创建一个响应式设计 - 到目前为止它一直很顺利,虽然我只是碰壁了!我的标题中有一个很长的h1,所以当屏幕变得足够小时,它就不适合 - 并且会破坏响应的想法.

我要问的是,是否可以在获取时更改h1中的内容 - 让我们说500px宽？(例)

现在我的h1是"CARSTEN ANDERSEN",我希望它能以500px改为"CARSTEN".

提前致谢

Answer 1

<h1>Carsten <span class="hide-when-narrow">Andersen</span></h1>
<style>
@media (max-width: 500px) {
  .hide-when-narrow {
    display: none;
  }
}
</style>

由于这是内容问题,因此应在标记中处理.