Нужно, чтобы длинный многострочный текст обрезался(скрывался), в конец добавлялось многоточие и ссылка "посмотреть больше". Щелчок по кнопке раскрывает весь текст и в конец вставляется кнопка "скрыть".
Искал в сети готовые решения. Все, которые нашел имеют серьезный недостаток: они работают с голым тестом без тэгов, например:
<div>здесь написан текст</div>
Остановился на решении "cutString". Скрытый текст заключается в <span></span> и после его показа происходит не состыковка с предыдущей строкой <p></p>. Можете посмотреть вот здесь:
http://www.modano.ru/uniforma/fartuki
Вот код плагина:
(function( $ ) {
$.fn.cutstring = function() {
this.each(function() {
var me = $(this);
var settings = {
display: me.is('[data-display]') ? me.attr('data-display') : 'none',
maxLength: me.is('[data-max-length]') ? parseInt(me.attr('data-max-length')) : Math.ceil((me.html().length * 20) / 100),
showText: me.is('[data-show-text]') ? me.attr('data-show-text') : 'читать далее',
hideText: me.is('[data-hide-text]') ? me.attr('data-hide-text') : 'скрыть',
};
if ( me.html().length > settings.maxLength ) {
var subText1 = me.html().substring(0, settings.maxLength);
var subText2 = me.html().substring(settings.maxLength);
var meHellip = $('<span>'+ ( (settings.display == '') ? ' ' : '… ' ) +'</span>').addClass('cutstring-hellip');
var meSuffix = $('<span>'+ subText2 +'</span>').addClass('cutstring-suffix').css('display', settings.display);
var meToggle = $('<a><span>'+ ( (settings.display == '') ? settings.hideText : settings.showText ) +'</span></a>').addClass('cutstring-toggle');
me.html(subText1).append(meSuffix).append(meHellip).append(meToggle);
meToggle.click(function() {
settings.display = (settings.display == '') ? 'none' : '';
meHellip.html( (settings.display == '') ? ' ' : '… ' );
meSuffix.css('display', settings.display);
meToggle.html( (settings.display == '') ? settings.hideText : settings.showText );
});
}
})
};
})(jQuery);
Сам в JS не силен, поэтому прошу гуру подсказать решение.