Усекающий текст абзаца с фиксированной высотой и без кровотечения

Question

См. Прикрепленное изображение. (http://i.imgur.com/SWlUllK.jpg)

У меня есть три смежных абзаца, которые я хотел бы усекать перед вызовом «Подробнее».

Уловка состоит в том, что каждый из предметов имеет фиксированную высоту, так что мои кнопки усечения («Подробнее») могут выстраиваться в линию по горизонтали, как вы можете видеть на изображении.

Проблема, с которой я столкнулся, заключается в том, что длина выдержки зависит от длины текста заголовка. Если есть заголовок из трех строк, длина выдержки будет короче из-за увеличенной высоты, которую занимает заголовок.

На данный момент я использую некоторый jQuery для выполнения символьного подсчета и усечения после X слов. Мне пришло в голову, что это не жизнеспособное решение.

Я не мог понять, как использовать CCS либо потому, что кнопка внизу абсолютно позиционирована так переполнена: скрытая игнорирует высоту кнопки и просто течет за ней, отсекая ее в конце статьи.

Единственная вещь, о которой я думал, заставляет статью быть определенной высотой, а затем перемещает кнопку «Читать дальше» за пределами тега статьи, но для меня это не похоже на хорошую семантику.

Любые мысли по этому поводу?

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

Я хороший способ сделать это наличие "переполнение-у: прокручивать" на вашей статье 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"; 
    } 
}