Truncating paragraph text with a fixed hight and no bleed

Question

See attached image. (http://i.imgur.com/SWlUllK.jpg)

I have three adjacent paragraphs which I would like to truncate before the "Read More" call-to-action.

The catch is that each of the articles has a fixed height so that my truncation buttons ("Read More") can line up on the same horizontal as you can see in the image.

The problem I'm facing here is that the length of the excerpt is dependant on the length of the heading text. If there is a three line heading then the length of the excerpt will be shorter due to the increased height that the header is taking up.

At the moment I'm using some jQuery to do character count and truncate after X words. It's occurred to me that that is not a viable solution.

I couldn't figure out a way to use CCS either because the button at the bottom is absolutely positioned so overflow:hidden ignores the height of the button and just flows behind it cutting it off at the end of the article.

The only thing that I've thought of is forcing the article to be a specific height and then moving the "Read More" button outside the article tag but that doesn't seem like good semantics to me.

Any thoughts on this?

Sass:

article {

border-right: 1px solid #e7e7e7;
height: 506px;
position: relative;

p {
    font-size: emCalc(16px);
    overflow: hidden;
    margin-bottom: 0.6em;   
    max-height: 255px;  
}

p + a {
    position: absolute;
    bottom: 0;
    display: block;
    background: $lightBlue;
    padding: 0.8em;
    color: #fff;
    text-align: center;
}

}

Answer 1

I good way of doing it is having "overflow-y: scroll" on your article HTML element and then removing text until the ".scrollHeight == .offsetHeight" of the HTML element.

http://jsfiddle.net/qdxTj/

Here's the straight JavaScript.

var all = document.getElementsByTagName("div");
for(var i=0; i<all.length; i++) {
    var article = all[i];
    if(article.className && /(^|\s)article($|\s)/.test(article.className)) {
        article.scrollTop = 1;
        var cnt = 0;
        while(article.scrollTop != 0 || article.scrollHeight != article.offsetHeight) {
            cnt++; if(cnt > 50) break;
            var ps = article.getElementsByTagName("p");
            if(ps.length == 0)
                break;
            var p = ps[ps.length - 1];
            var shorter = p.innerHTML;
            var idx = shorter.lastIndexOf(" ");
            shorter = idx >= 0 ? shorter.substring(0, idx) : "";
            p.innerHTML = shorter;
            if(p.innerHTML.length == 0)
                article.removeChild(p);
            article.scrollTop = 1;
        }
        article.style.overflowY = "hidden";
    }
}