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>

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

Answer 2

您可以max-width使用overflow: hidden隐藏多余的字词/字母（使用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>内容？

3 个答案: