How to trigger a show or hide operation based on div size when the browser is resized

Set the max-height to 100% for show more and set the max-height to 180px when show less.

Updated JSFiddle

You don't need the overflow to ever be shown, instead just increase the max-height to 100%.

$("a.more").click(function(e){
    e.preventDefault();
    $(".info").css({"max-height": "100%"});
    $("a.less").show();
    $("a.more").hide();
    return false;
});

I also added in some padding so you can see the text a bit easier.

Updated fiddle

This is really another question, but using innerHeight instead of height you can detect if the text is overflowing with the padding on window resize:

$(window).resize(function(){
    if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
        $("a.more").show();
    }
});

I also positioned the less/more button absolutely at the bottom of the info box to overlay any text that might extend into the padding:

.info-wrapper a {
        left: 0; bottom: 0;
        width: 100%;
        background: red;
        position: absolute;
        font: 700 .67em/1.25em Arial;
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
        line-height: 20px;
}

Full code is in this fiddle