用固定高度截断段落文本并且不流血

Question

查看附加图片。 （http://i.imgur.com/SWlUllK.jpg）

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

问题在于每个文章都有一个固定的高度，这样我的截断按钮（“Read More”）就可以在图像中看到的同一水平线上排列。

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

目前我正在使用一些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

我这样做是有 “溢出-Y：滚动” 的好方法您的文章HTML元素，然后直到” .scrollHeight删除文本==。 offsetHeight“的HTML元素。

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