Как ограничить <td> только тремя строками?

Я хотел бы получить унифицированный внешний вид во всех моих табличных рядах. Когда вы посмотрите на мой пример ниже, вы увидите, что заметка в середине проходит более 4 строк, и это не так красиво.

enter image description here

Я надеялся ограничить все <td> на 3 строки.

Если будет показано больше трех строк, тогда он должен вырезать содержимое с помощью ... [click for more] и помещать содержимое внутри collapseable element, так что при нажатии на него будет отображаться весь контент.

Последнее не должно быть проблемой, но как ограничить контент только тремя строками? Должен ли я считать персонажей, чтобы принять решение? Есть ли лучшая стратегия? Я использую Django, кстати, но я счастлив использовать javascript, jquery или любую магию css, чтобы решить эту проблему.

Update:

Принятый ответ очень хорош. Однако это связано с предостережением, которое нелегко решить. если у вас есть соседний td, который уже проходит три строки, а текущий td - только две строки, мы получим бесконечный цикл while.

enter image description here

while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) >= 3){ .. }

Так как $(this).innerHeight() не может уменьшиться из-за соседней ячейки, удерживающей высоту выше. Я думаю, что если бы можно было получить css текущего td и скопировать его по содержимому полностью в отдельном поле, где соседние tds не могут вмешиваться, мы получим оптимальное решение.

Обновление 2:

Как упоминал Асад, решение состоит в том, чтобы поместить обертку div вокруг содержимого td и установить класс на div внутри td, а не на td. Он работает безупречно.

Ответы

Ответ 1

Предполагая, что вы используете jQuery, вы можете найти все элементы td, которые превышают определенное количество строк, используя:

$('td').filter(function(){
    return $(this).innerHeight() / $(this).css('line-height').slice(0,-2) > 3; //more than 3 lines
});

Затем вы можете применить складывающиеся элементы к этим элементам td.

Вот демонстрация (используя абзацы вместо td s): http://jsfiddle.net/jM4ZY/1/

Вот пример отсечения содержимого, чтобы он соответствовал 3 строкам, затем добавив еще одну кнопку: http://jsfiddle.net/jM4ZY/2/

Что касается редактирования, это легко решить, используя внутреннюю оболочку для вашего контента; возможно, элемент div. Затем вы можете измерить высоту этого элемента, который не зависит от высоты соседних ячеек.

Ответ 2

Другое решение jQuery описано здесь

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

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

который я взял из Вычисление ширины текста