SO - 21097389

JoshC. Use first-line as a jQuery selector

by moob

HTML

<p id="el">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>

<p id="count"></p>

CSS

#el:first-line {
    color:red;
    font-style:italic;
    font-weight:bold;
}

#count {color:#aaa}
#count:before {content:"First line = ";}

JavaScript

function first_line(element) {
    var el = document.getElementById(element), cache = text = el.innerHTML;
    el.innerHTML = 'a'; var initial = el.offsetHeight; el.innerHTML = cache;
    arr = text.split(" ");
    var i = arr.length;
    while(i--) {
        text = text.substring(0, text.lastIndexOf(" "));
        if (el.offsetHeight == initial) {
            var temp = el.innerHTML;
            el.innerHTML = cache;
            return temp;
        }
        el.innerHTML = text;
    }
}

var count;
window.onload = function(event) {
    var fl = first_line('el');
    count = document.getElementById("count");
    count.innerHTML = fl.split(" ").length+ " words / "+fl.length+" characters";
};
window.onresize = function(event) {
    var fl = first_line('el');
    count.innerHTML = fl.split(" ").length+ " words / "+fl.length+" characters";
};