Hide if text is too long

Javascript and CSS solution

HTML

<h1>Hide text if text is too long</h1>


<h2>CSS + jQuery (Zepto)</h2>

<div class="article2">
     <h3>Element Title</h3>

    <div class="description">
        <p>Guess I better write a script to find the number of characters in this text. Since I am a programmer I take 35 second tasks and turn them into open source tools.</p><span class="more grad">More...</span>

    </div>
</div>
<div class="article">
     <h3>Element Title</h3>

    <div class="description">
        <p>This text is a bit shorter so should only trigger for smaller sizes</p><a href="#more" class="more grad">More...</a>

    </div>
</div>

CSS

.article {
    background:#f1f1f1;
    padding:1em;
    max-width:400px;
    margin-bottom:1em;
    border: 1px solid #000;
}
.description {
    position: relative;
    overflow:hidden;
}
.more {
    position: absolute;
    bottom:0;
    right:0;
    padding-left:2em;
}
.article p {
    padding:0;
    margin:0;
    white-space:nowrap;
    float:left;
}
.active.article p {
    white-space:normal;
}
.active.article .more {
    position: static;
    padding:0;
}
/* long messy gradient background code */
 .grad {
    background: -moz-linear-gradient(left, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.53) 19%, rgba(241, 241, 241, 1) 36%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(241, 241, 241, 0)), color-stop(19%, rgba(241, 241, 241, 0.53)), color-stop(36%, rgba(241, 241, 241, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.53) 19%, rgba(241, 241, 241, 1) 36%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.53) 19%, rgba(241, 241, 241, 1) 36%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.53) 19%, rgba(241, 241, 241, 1) 36%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(241, 241, 241, 0) 0%, rgba(241, 241, 241, 0.53) 19%, rgba(241, 241, 241, 1) 36%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f1f1f1', endColorstr='#f1f1f1', GradientType=1);
    /* IE6-9 */
}

JavaScript

function checkLength() {
    this.showing = new Array();
}

checkLength.prototype.check = function() {
    var that = this;
    $('.article').each(function (index) {
        var article = $(this);
        var theP = article.find('p');
        var theMore = article.find('.more');
        console.log('p '+theP.width());
            console.log('art '+article.width());
        if (theP.width() > article.width()) {
            theMore.show();
            that.showing[index] = true;
        } else {
            if (!article.hasClass('active')) {
                theMore.hide();
                that.showing[index] = false;
            } else {
                that.showing[index] = false;
            }
        }
        theMore.text(that.showing[index] ? "..." : "");
    });
};

$(function () {
    var checker = new checkLength();
    checker.check();
    $('.more').each(function () {

        $(this).on('click', function (e) {
            $(this).closest('.article').toggleClass('active');
            checker.check();
        });
    });

    $(window).resize(function() {
        checker.check()
    });
});