我有一个链接,当浏览器宽度降至40em以下时,我想将内容“ Post Your Need”更改为“✎”。我已经尝试了一个半小时的谷歌搜索,但无济于事。这里有什么帮助吗?我在寻找jquery / javascript。
<a class="postbutton" href='post.php'>Post Your Need</a>
编辑:
所有人的坚持让我考虑使用CSS而不是jquery。最后,我用铅笔图标创建了第二个锚标记,并使用媒体查询将其放置在视口上方。因此,当它越过查询行时,较大的标签会以“ margin-top:-2em”向上移动,而较小的标签会向下移动。它非常简单,允许我将单独的CSS规则应用于这两个元素,并且在调整浏览器大小时,上下移动它们看起来很酷。
最佳答案
选项1.更改CSS
您可以仅通过CSS(sample)来实现:
@media (max-width: 40em) {
// when smaller than 40em...
.postbutton {
// resize postbutton... hiding overflow
display: inline-block;
white-space: nowrap;
overflow-x: hidden;
width: 13px;
color: #000000;
text-decoration: none;
}
.postbutton:before{
// and insert this text at the beginning
content: '✎';
}
}
选项2。更改HTML和CSS
另外,从语义上讲,您可以更改标记和CSS。只需使用以下标记(sample)替换
<a class="postbutton">
的内容:<span class="collapsed">✎</span><span class="expanded">Post Your Need</span>
然后,您可以使用CSS专门定位这些元素:
.postbutton .collapsed
{
// hide the collapsed text by default
display: none;
}
@media (max-width: 40em) {
// when smaller than 40em...
.postbutton .collapsed {
display: inherit; // show the collapsed text
}
.postbutton .expanded {
display: none; // hide the expanded text
}
}
请参见
:before
伪元素和CSS Media Queries关于javascript - 根据浏览器宽度更改链接文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25670218/