JQuery - Усекать текст по строке (не по количеству символов)

Question

Мне нужен сценарий Jquery, чтобы обрезать текст по строкам (а не по количеству символов).

Я хотел бы получить равномерно усеченный текстовый блок. Он должен иметь ссылку «больше» и «меньше» для расширения и сокращения текстового абзаца. Мой текст абзаца заворачивают в DIV с классом, как это:

<div class="content"> 
<h2>Headline</h2> 
<p>The paragraph Text here</p> 
</div> 

Ближайший решение, я мог бы найти на SOF это ниже один (но `s для TEXTAREA элемента и не работает для меня): Limiting number of lines in textarea

Большое спасибо за любые советы. Ben

Answer 1

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

e: нашел еще один вопрос, который в основном является тем, что вам нужно - на самом деле у них тоже нет разрешения, но, на мой взгляд, высота линии и высота элементов наиболее близки.

"How can I count text lines inside a dom element"

Answer 2

почему бы не сделать р элемент с переливом: скрытый; дать высоту фиксированной линии, caluclate высоту div, поэтому id содержит точно количество строк, которые вам нужны, и единственное изменение высоты p из javascript.

p{ 
    overflow:hidden; 
    line-height:13px; 
    height:26px; /* show only 2 rows */ 
} 
<script type="text/javascript"> 
    function seeMoreRows(){ 
     $(p).height("52px"); 
    } 
</script> 

Answer 3

Для базового подхода, вы могли бы взглянуть на CSS собственности line-height и использовать это в своих расчетах. Имейте в виду, что этот подход не учитывает другие встроенные элементы, которые больше этой высоты (например, изображения).

Если вы хотите что-то более продвинутое, вы можете получить информацию о каждой строке с помощью функции getClientRects(). Эта функция возвращает набор TextRectangle объектов с шириной, высотой и смещением для каждого из них.

См. Здесь this answer для примера (хотя и несвязанной цели) работы getClientRects().

---

Обновление, у которого было немного времени, чтобы вернуться и обновить этот ответ с помощью фактического примера. Это основной, но вы получите идею:

http://jsbin.com/ukaqu3/2

Пара указателей:

• Коллекция возвращаемый getClientRects статичен, он не будет обновляться автоматически, если содержащий элемента изменение размеров. Мой пример работает вокруг этого, захватывая событие изменения размера окна.

• Для некоторых странных стандартов соответствия требованиям, которые я не понимаю, элемент, который вы вызываете getClientRects on должен быть встроенным элементом. В примере, который у меня есть, я использую контейнер div с текстом в другом div внутри с display: inline.

Answer 4

Я сделал этот небольшой фрагмент кода JQuery, чтобы позволить мне укоротить текстовые блоки по линии (через классы CSS), не стесняйтесь использовать и комментировать его.

Вот jsFiddle, которые также включают функции усечения по счету символов или количеству слов. Вы можете видеть, что в настоящее время изменение размера окна не обновляет отображение блока, я работаю над ним.

/* 
* Truncate a text bloc after x lines 
* <p class="t_truncate_l_2">Lorem ipsum magna eiusmod sit labore.</p> 
*/ 
$("*").filter(function() { 
    return /t_truncate_l_/.test($(this).attr('class')); 
}).each(function() { 
    var el = $(this); 
    var content = el.text(); 
    var classList = el.attr('class').split(/\s+/); 
    $.each(classList, function(index, item){ 
     if(/^t_truncate_l_/.test(item)) { 
      var n = item.substr(13); 
      var lineHeight = parseInt(el.css('line-height')); 
      if(lineHeight == 1 || el.css('line-height') == 'normal') 
       lineHeight = parseInt(el.css('font-size')) * 1.3; 
      var maxHeight = n * lineHeight; 
      var truncated = $.trim(content); 
      var old; 
      if(el.height() > maxHeight) 
       truncated += '...'; 
      while(el.height() > maxHeight && old != truncated) { 
       old = truncated; 
       truncated = truncated.replace(/\s[^\s]*\.\.\.$/, '...'); 
       el.text(truncated); 
      } 
     } 
    }); 
}); 

Answer 5

TL; др - набор высоты на свой контейнер DIV, а затем использовать jQuery dotdotdot plugin

собирался сделать удивительный пример @Andy Э в плагин, но потом понял, https://github.com/BeSite/jQuery.dotdotdot может осуществить это , В нашем случае мы хотим показать одну строку на ширине рабочего стола и две строки на мобильном устройстве/планшете.

Наш CSS будет просто устанавливать контейнер div в эквивалент одной или двух строк, соответственно, а затем плагин dotdotdot будет обрабатывать остальные.

Answer 6

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

HTML-:

<p class="ellipsis" data-ellipsis-max-line-count="3"> 
    Put some multiline text here 
</p> 

Javascript/Jquery:

(function() { 

$(document).ready(function(){ 
    store_contents(); 
    lazy_update(1000); 
}); 

// Lazy update saves performance for other tasks... 
var lazy_update = function(delay) { 

    window.lazy_update_timeout = setTimeout(function(){ 

     update_ellipsis(); 

     $(window).one('resize', function() { 
      lazy_update(delay); 
     }); 

    }, delay); 
} 

var store_contents = function(){ 

    $('.ellipsis').each(function(){ 
     var p = $(this); 
     p.data('ellipsis-storage', p.html()); 
    }); 
} 

var update_ellipsis = function(){ 

    $('.ellipsis').each(function(){ 

     var p = $(this); 
     var max_line_count = p.data('ellipsis-max-line-count'); 
     var line_height = p.html('&nbsp').outerHeight(); 
     var max_height = max_line_count*line_height; 
     p.html(p.data('ellipsis-storage')); 
     var p_height = p.outerHeight(); 

     while(p_height > max_height){ 

      var content_arr = p.html().split(' '); 
      content_arr.pop(); 
      content_arr.pop(); 
      content_arr.push('...'); 
      p.html(content_arr.join(' ')); 
      p_height = p.outerHeight(); 
     } 
    }); 
} 

})(); 

Я надеюсь, вам понравится!