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

Media Query - Change <h1> content?

我正在尝试通过媒体查询在这里创建响应式设计 - 到目前为止一切顺利,尽管我只是碰壁了! 我的页眉中有一个很长的 h1,所以当屏幕变得足够小时,它就放不下了 - 并且破坏了响应的想法。

我想问的是,是否可以在获取时更改我的 h1 中的内容 - 比方说 500 像素宽? (示例)

现在我的 h1 是 "CARSTEN ANDERSEN",我希望它在 500px 处更改为 "CARSTEN"。

提前致谢

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

既然是内容问题,应该在标记中处理。

您可以通过使用 max-widthoverflow: hidden 隐藏多余的 words/letters(使用 white-space: nowrap 强制一行):

h1 { border:1px solid red; }

@media (max-width: 500px) {
  h1 { max-width: 158px; overflow: hidden; white-space: nowrap; }
}
<h1>CARSTEN ANDERSEN</h1>

JSFiddle:https://jsfiddle.net/azizn/cs5ttm7s/

您需要更改内容属性

h1:before {
  content: 'CARSTEN ANDERSEN';
}

@media only screen and (max-width: 500px) {
  h1:before {
    content: 'CARSTEN';
  }
}
<h1>

</h1>

是这样的吗?