我有一个链接,当浏览器宽度降至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/

10-12 12:27
查看更多