Блог

Я использую плагин для отображения только первых 500 символов текста… Но это не работает с некоторыми HTML, я не могу воспроизвести это, но я думаю, что это могло бы быть с <img> тегом, или <blockquote> или, может быть, <ul> / <ol>

Он просто показывает весь текст И ссылку «Посмотреть больше»…

Есть идея?

Это код

 (function ($) {
$.fn.readmore = function (settings) {

$('.home_excerpt').removeClass('home_excerpt');

var opts =  $.extend({}, $.fn.readmore.defaults, settings);

this.each(function () {
  $(this).data("opts", opts);
  if ($(this).html().length > opts.substr_len) {
    abridge($(this));
    linkage($(this));
  }
});

function linkage(elem) {
  elem.append(elem.data("opts").more_link);
  $(".text_seemore").click( function () {
    $(this).hide();
    $(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").show();
    return false;
  });
}

function abridge(elem) {
  var opts = elem.data("opts");
  var txt = elem.html();
  var len = opts.substr_len;
  var dots = "<span>"   opts.ellipses   "</span>";
  var charAtLen = txt.substr(len, 1);
  while (len < txt.length amp;amp; !/s/.test(charAtLen)) {
      len  ;
      charAtLen = txt.substr(len, 1);
  }
  var shown = txt.substring(0, len)   dots;
  var hidden = '<span class="hidden" style="display:none;">'   txt.substring(len, txt.length)   '</span>';
  elem.html(shown   hidden);
}

return this;
};

$.fn.readmore.defaults = {
substr_len: 500,
ellipses: 'amp;#8230;',
more_link: '<br /><a href="#" class="text_seemore">Seeamp;nbsp;More</a>'
};

 })(jQuery);
  

Похоже, что в вашей abridge() функции вы пытаетесь избежать сокращения слова пополам, если я правильно читаю ваш код. Проблема в том, что если после желаемой длины нет пробелов, вы просто вернете все это целиком, но впоследствии вы не проверяете, так ли это. Это означает, что вы вернете полный текст И добавите ссылку more.

При обработке HTML описанное выше является обычным случаем, если у вас есть строки из одного слова, таблицы с ячейками из одного слова и т.д., Или если вы используете amp;nbsp; в качестве пробела.

Большая проблема заключается в том, что вы сокращаете HTML как строку, что почти наверняка приведет к нарушению разметки. Вы можете легко разрезать теги пополам, удалить закрывающие теги элементов блока и так далее. Посмотрите, можете ли вы использовать elem.text() для обработки этого как чистой строки, или, если вы хотите сохранить форматирование, посмотрите, можете ли вы извлечь первый абзац или что-то подобное.

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