1

见附图。( http://i.imgur.com/SWlUllK.jpg )

我想在“阅读更多”号召性用语之前截断三个相邻的段落。

问题是每篇文章都有固定的高度，因此我的截断按钮（“阅读更多”）可以在同一水平线上排列，就像您在图像中看到的那样。

我在这里面临的问题是摘录的长度取决于标题文本的长度。如果有一个三行标题，那么由于标题占用的高度增加，摘录的长度会更短。

目前我正在使用一些 jQuery 来进行字符计数并在 X 单词后截断。我突然想到这不是一个可行的解决方案。

我也想不出一种使用 CCS 的方法，因为底部的按钮是绝对定位的，所以溢出：hidden 忽略了按钮的高度，只是流到它后面，在文章末尾将其切断。

我唯一想到的就是将文章强制为特定高度，然后将“阅读更多”按钮移到文章标签之外，但这对我来说似乎不是很好的语义。

对此有什么想法吗？

萨斯：

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;
}

}

4

1 回答 1

1

我这样做的好方法是在您的文章 HTML 元素上添加“overflow-y: scroll”，然后删除文本直到 HTML 元素的“.scrollHeight == .offsetHeight”。

http://jsfiddle.net/qdxTj/

这是直接的 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";
    }
}
于 2013-07-10T18:47:53.943 回答