Question

见附图。（http://i.imgur.com/SWlUllK.jpg）

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

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

我在这里遇到的问题是摘录的长度取决于标题文本的长度。如果有三行标题，则由于标题占据的高度增加，摘录的长度将会缩短。

目前我正在使用一些jQuery进行字符计数并在X字后截断。我发现这不是一个可行的解决方案。

我无法找到使用CCS的方法，因为底部的按钮是绝对定位的，因此溢出：隐藏忽略按钮的高度，只是在它后面流动，在文章末尾切断它。

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

对此有何想法？

萨斯：

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

我这样做的好方法是在文章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";
    }
}

截断具有固定高度且没有出血的段落文本

1 个答案: