媒体查询 - 更改 <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-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/
您需要更改内容属性
h1:before {
content: 'CARSTEN ANDERSEN';
}
@media only screen and (max-width: 500px) {
h1:before {
content: 'CARSTEN';
}
}
<h1>
</h1>
是这样的吗?
我正在尝试通过媒体查询在这里创建响应式设计 - 到目前为止一切顺利,尽管我只是碰壁了! 我的页眉中有一个很长的 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-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/
您需要更改内容属性
h1:before {
content: 'CARSTEN ANDERSEN';
}
@media only screen and (max-width: 500px) {
h1:before {
content: 'CARSTEN';
}
}
<h1>
</h1>
是这样的吗?