20.06.2015, 16:51
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от rikitiki
|
|
по всем элементам текста, а не только по пробелам?
|
убрать пробел между кавычками в одном split("") и четырёх join("")
строки 48 и 56, 62, 76, 84 |
|
10.07.2015, 16:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
ещё вариант обрезния строк
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
display: block;
text-align: right;
}
div.more {
display: none;
}
.ta{
margin: 20px auto;
background:#3C3;
color:#66F;
width:600px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.correctLines = function(options) {
var o = jQuery.extend({
maxLine: 5,
afterLength: " ... ",
fullText: false,
moreText: "\u00bb\u00bb",
lessText: "\u00ab\u00ab",
classNew: "more",
resize: true
}, options);
if (o.resize) {
var opt = jQuery.extend({}, o, {
resize: false
});
var elem = this;
$(window).resize(function() {
$("." + o.classNew, elem).remove();
$(elem).correctLines(opt)
})
}
return this.each(function(index, self) {
$(self).find("*:last").length && (self = $(self).find("*:last"));
var txt = $(self).data("text") ||
$(self).data("text", $(self).html().split(" ")).data("text");
$(self).html(txt[0]).css({
"height": "auto"
});
var lastHeight = $(self).outerHeight();
var k = 1,
i;
for (i = 1; i < txt.length; i++) {
$(self).html(txt.slice(0, i).join(" ") + o.afterLength + o.moreText);
if (lastHeight < $(self).outerHeight()) {
lastHeight = $(self).outerHeight();
k++;
if (k > o.maxLine) {
i--;
$(self).html(txt.slice(0, i).join(" ") + o.afterLength);
if (o.fullText) {
var div = $("<div/>", {
"text": txt.slice(i).join(" "),
"class": o.classNew
}).appendTo($(self)) ;
$("<a/>", {
"text": o.moreText,
"class": o.classNew
}).click(function() {
var text = $(this).text() == o.moreText ?
o.lessText : o.moreText;
$(this).text(text)
div.slideToggle();
}).appendTo($(self));
}
break
}
}
}
if (k <= o.maxLine) $(self).html(txt.join(" "))
})
}
})(jQuery);
</script>
<title></title>
</head>
<body >
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div>
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий.
</div>
<div class="ta" >
Товарищи! консультация с широким активом требуют
определения и уточнения существенных финансовых и
административных условий. Не следует, однако
забывать, что укрепление и развитие структуры
влечет за собой процесс внедрения и модернизации
направлений прогрессивного развития.
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции позволяет оценить
значение форм развития. Товарищи! начало
повседневной работы по формированию позиции
позволяет выполнять важные задания по разработке
форм развития. Товарищи! сложившаяся структура
организации требуют от нас анализа систем
массового участия. Таким образом новая модель
организационной деятельности позволяет оценить
значение позиций, занимаемых участниками в
отношении поставленных задач. Разнообразный и
богатый опыт постоянное
информационно-пропагандистское обеспечение нашей
деятельности способствует подготовки и
реализации модели развития
</div>
<script>
$(".ta").correctLines({
fullText: true,
maxLine: 4,
moreText: "Открыть все",
lessText: "Свернуть",
afterLength: " "
})
</script>
</body>
</html>
|
|
10.07.2015, 16:21
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Сообщение от rikitiki
|
|
Столкнулся с такой проблемой
|
Это не проблема, а колхозная верстка. |
|
21.02.2016, 22:49
|
 |
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 20
|
|
Здравствуйте. Применил скрипт из поста #19 к двум страницам маленького магазинчика, настроив его на подрезку в две строки троеточием
Когда товара мало, то скрипт справляется, хотя видно что режет с запозданием
http://innka.info/shirokoformatnaya-...a-woocommerce/
Но когда товара на странице много, то скрипт не успевает всё просчитать.
http://innka.info/vsyo-na-ves-ekran/
В моём Файерфоксе через некоторое время останавливается и пишет "Сценарий не отвечает". При этом часть товара внизу остаётся с неподрезанным текстом. Chrome и Opera кое-как справляются и со значительным запозданием доводят сценарий до конца.
Пересчёт возобновляется, если изменить ширину окна браузера. Скрипт вновь пересчитывает количество знаков под новую ширину. |
|
21.02.2016, 23:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
rikitiki,
возьмите в 19 новую версию... желательно бы ошибки исправить на странице ... а то у вас там ссылки в ссылках двоятся
|
|
22.02.2016, 00:24
|
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 20
|
|
Wordpress сам всегда вставляет на все страницы самую последнюю версию библиотеки. Поэтому строку
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
я не использую
Сообщение от рони
|
rikitiki,
желательно бы ошибки исправить на странице ... а то у вас там ссылки в ссылках двоятся
|
Просто теряюсь, где искать? На странице каждая картинка с заголовком и ценником ведёт на соответствующую карточку товара. Это обусловлено кодом php, плагина Woocommerce.
Не было случая, чтобы я по ссылке попадал не туда куда нужно. Возможно вас смутили всплывающие подсказки, следующие за курсором.
http://innka.info/vsplyvayushhie-opi...x-woocommerce/
Так это я старинный код, где-то нашёл и дополнил им витрину.
Сейчас с вашим кодом витрина смотрится идеально. На широкоформатном мониторе 1920х1080px аж в девять колонок.
И вариантов для подрезки мало
Код css
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
умеет подрезать троеточием только одну строку
Код
overflow: hidden;
прячет, вылезший за фиксированный по высоте див, текст, но не умеет ставить троеточия.
А всякие там резалки на php типа substr не следует принимать во внимание, так как они работают на стороне сервера.
Остаётся только ваш код. но он к сожалению тормозит на тяжёлых страницах.
Последний раз редактировалось rikitiki, 22.02.2016 в 00:30.
|
|
22.02.2016, 11:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
rikitiki,
пост 19 снова изменён, скопируйте по новой
|
|
22.02.2016, 14:46
|
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 20
|
|
Огромная благодарность за помощь!
Внёс исправления по части ссылок. Теперь на каждый товар только одна ссылка.
Для сравнения, создал копию страницы, в которой осуществляется скрытие чисто на CSS (фиксированная на две строки высота блока + overflow:hidden), то-есть без применения скрипта:
Всё на весь экран CSS
Разумеется, в этом случае, троеточия отсутствуют, потому трудно разобрать, где полный заголовок, а где его часть.
Скопировал по новой ваш изменённый код из поста 19. Работает заметно быстрей, но хуже чем на CSS и к тому же, кое-где, изредка, выводит в три строки, а не в две. На старом скрипте такого не было.
Чтобы не перепутать, уточнил заголовок страницы со скриптом. Теперь она называется:
Всё на весь экран jQuery
Ниже, на всякий случай, вдруг я что перепутал, привожу ваш код, скопированный со своего сайта:
/* Скрипт подрезки строк. Первая часть */
<script type="text/javascript">
(function($) {
$.fn.correctLines = function(options) {
var o = jQuery.extend({
maxLine: 5,
afterLength: " ... ",
fullText: false,
moreText: "\u00bb\u00bb",
lessText: "\u00ab\u00ab",
classNew: "more",
resize: true
}, options);
var elem = this;
var res = $(elem).data("resize");
if(!res && o.resize) {
var timer;
$(elem).data("resize", true);
$(window).resize(function() {
window.clearTimeout(timer);
timer = window.setTimeout(
function() {
$("." + o.classNew, elem).remove();
$(elem).correctLines(o);
}, 300
)
})
}
return this.each(function(index, self) {
$(self).find("*:last").length && (self = $(self).find("*:last"));
var txt = $(self).data("text") ||
$(self).data("text", $(self).html().split(" ")).data("text");
$(self).html(txt[0]).css({
"height": "auto"
});
var lastHeight = $(self).outerHeight();
var k = 1,
i;
for (i = 1; i < txt.length; i++) {
$(self).html(txt.slice(0, i).join(" ") + o.afterLength + o.moreText);
if (lastHeight < $(self).outerHeight()) {
lastHeight = $(self).outerHeight();
k++;
if (k > o.maxLine) {
i--;
$(self).html(txt.slice(0, i).join(" ") + o.afterLength);
if (o.fullText) {
$("<a/>", {
"text": o.moreText,
"class": o.classNew
}).click(function() {
var text = $(this).text() == o.moreText ?
o.lessText : o.moreText;
$(this).text(text).nextAll("." + o.classNew).slideToggle()
}).appendTo($(self));
$("<br/>", {
"class": o.classNew
}).appendTo($(self));
$("<div/>", {
"text": txt.slice(i).join(" "),
"class": o.classNew
}).appendTo($(self))
}
break
}
}
}
if (k <= o.maxLine) $(self).html(txt.join(" "))
})
}
})(jQuery);
</script>
/* Скрипт подрезки строк. Вторая часть */
<script type="text/javascript">
(function($) {
$(".text p").correctLines({fullText: false,maxLine: 2 })
$(".text2 span").correctLines({fullText: false,maxLine: 2 })
})(jQuery);
</script>
Данный код обрабатывает заголовок типа:
<div class="text"><p>Заголовок</p></div>
Последний раз редактировалось rikitiki, 22.02.2016 в 15:20.
|
|
23.02.2016, 02:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
rikitiki,
слишком много элементов перестраивать, нужен другой скрипт с технологией Virtual DOM ... пока мне такой не написать 
|
|
|
|
