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

Question

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

我想问的是，是否可以在获取时更改我的 h1 中的内容 - 比方说 500 像素宽？（示例）

现在我的 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>

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

Answer 2

您可以通过使用 max-width 和 overflow: 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/

Answer 3

您需要更改内容属性

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

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

<h1>

</h1>

是这样的吗？

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

Media Query - Change <h1> content?

html

css

header

nav