根据浏览器宽度更改链接文本

Question

我有一个链接，当浏览器下降到40em以下时，我想将内容“Post Your Need”更改为“✎”。我试着用Google搜索一个实时的半小时无济于事。这里有帮助吗？我正在寻找jquery/javascript。

<a class="postbutton" href='post.php'>Post Your Need</a> 

编辑：

所有你们都让我想起了CSS，而不是jQuery的的坚持。最后，我用铅笔图标创建了第二个锚标签，并使用媒体查询将其放置在视口上方。因此，当它跨过查询行时，较大的标记将以“margin-top：-2em”向上移动，较小的标记向下移动。它非常简单，允许我对这两个元素应用单独的CSS规则，并且在调整浏览器的大小时，上下移动看起来非常酷。

Answer 1

为代号说，有一个简单的CSS选项：媒体查询（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）

，但如果你是在使用jQuery设置，你可以通过执行获得窗口的宽度：

$(window).width(); // returns the width of the window 
// do stuff when the window is resized 
$(window).resize(function() { 
    $(window).width(); // the new width 
}); 

Answer 2

不知道我试图获得浏览器宽度的方式工作... 但为什么不在px中呢？

var minWidth = 40; // Define minWidth 
$(window).resize(function() { 
    // Get Browser width in em 
    var w = $(window).width()/parseFloat($("body").css("font-size")); 
    // Compare Browser width to defined minWidth 
    if(w < minWidth) { 
    // If Browser window is smaller than the defined minWidth, set small Link Text 
    $(".linkClass").html("[new HTML Content]"); 
    } else { 
    // If Browser window is bigger or equal to minWidth, set big Link Text 
    $(".linkClass").html("Post your need"); 
    } 
} 

注：未经测试，可能需要一些调整

编辑：哎呦...... 40EM不是30 :-)

Answer 3

选项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.更改HT ML和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}