Вход

Просмотр полной версии : скрипт, обрезающий строки


zlodiak
01.02.2013, 10:58
посоветуйте пожалуйста скрипт, который может обрезать в блоке текст до определённого количества строк

у меня есть такой (http://prozaik.16mb.com/js/crop_str.zip) . но он не подходит потому что нужно указывать конкретный родительский блок. при этом если в нём окажется вложенный например span, то скрипт не обрабатывает текст

danik.js
01.02.2013, 11:05
А можно конкретнее? Где, зачем, какой текст, и какие особенности?

zlodiak
01.02.2013, 11:27
в интернет-магазине описания товаров слишком длинные. хотелось бы сократить их до определённого количества строк(например до 3). но проблема в том, что описания созданы через визивиг и поэтому в тексте содержатся различные тэги типа span, div, p и т.д.

однако каждое описание находится в контейнере .text

хотелось бы что-нибудь типа такого
jQuery('.text').correctLines( 3, '' );

danik.js
01.02.2013, 11:30
Думаю вы решаете проблемы не через то место в том месте. Проблема на сервере, а не в браузере. Что за движок?

zlodiak
01.02.2013, 11:35
simpla. не хотелось бы править ядро. да и проще через js

рони
01.02.2013, 11:44
zlodiak,
Приведите пример html код блока в котором надо обрезать текст

zlodiak
01.02.2013, 11:59
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
</div>
</article>


но набор тэгов в .text может быть самый различный так как описание набиралось в визивиг-редакторе

рони
01.02.2013, 12:21
zlodiak,
попробуйте обратится к автору плагина devote (http://javascript.ru/forum/members/2541-devote/)

http://javascript.ru/forum/project/21063-plagin-obrezayushhijj-tekst-dlya-jquery.html#post122848

рони
01.02.2013, 14:08
zlodiak, почему плагин неработает я неразобрался, но поставил "костыль" с ним возможен такой вариант ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function(e){e.fn.correctLines=function(h,j){retur n this.each(function(p,d){var c,b;h=(c=/^(?:.*\s)?fixline_([\d]+)(?:\s.*)?$/.exec(d.className))&&c[1]||h||3;j=j||"...<br />";b=e(d).css("display");c=e(d).css("display","block").clone(!0).css({height:"auto",position:"absolute",width:d.offsetWidth+"px"}).html("");e(d).css("display",b).after(c);for(var k=0,m=0,l=0,n=0,f=-1,a=e(d).html(),g=[];/(<.*)\s(.*>)/g.exec(a);)a=a.replace(/(<.*)\s(.*>)/g,"$1&jftF767Tgjk56&$2");a=a.split(" ");for(b=0;b<a.length&& !(a[b]=a[b].replace(/&jftF767Tgjk56&/g," "),c[0].innerHTML+=a[b]+" ",c[0].clientHeight>l&&(k=l,n=f+1,f=b-1,l=c[0].offsetHeight,++m>h));b++);if(m>h){e(d).css({height:k+"px",overflowY:"hidden"});g=a.slice(n,f+1);k=c.html(g.join(" "))[0].offsetHeight;for(b=g.length-1;0<=b;b--)if(c.html(g.join(" ")+j),c[0].offsetHeight>k)g.splice(b,1),f--;else break;a[f]+=j;a.length=f+1;e(d).html(a.join(" "))}else e(d).css({height:"auto"});c.remove()})}})(jQuery);
</script>
<title></title>
</head>
<body>
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text span").correctLines(3,'')
</script>
</body>
</html>

DreamTheater
01.02.2013, 14:24
https://github.com/epeli/underscore.string

_.string.lines(str)

рони
01.02.2013, 16:41
Вариант плагина для обрезки строк с возможностью просмотра обрезанного ...:write:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.more{
background-color: #FFFFFF;
}

a.more {
cursor: pointer;
}
</style>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function( $ ){
$.fn.correctLines = function( maxLine, moreText ) {
return this.each(function( index, self ) {
moreText = moreText || '...more';
var txt = $( self ).html().split(' ');
$( self ).html(txt[0]).css( {"height": "auto"});
var lastHeight = $( self ).outerHeight();
var k = 1;
for(var i = 1; i < txt.length; i++ ) {
$( self ).html(txt.slice( 0, i ).join(' ')+' ');
if(lastHeight < $( self ).outerHeight()){
lastHeight = $( self ).outerHeight();
k++ ;
if (k > maxLine) { i--
$( self ).html(txt.slice( 0, i ).join(' '));
$("<a/>",{"text":moreText,"class": 'more'}).click(function() {
$(this).next(".more").slideToggle()
}).appendTo($( self ));
$("<div/>",{"text":txt.slice( i ).join(" "),"class": 'more'})
.css({"display":'none',"position": "absolute"}).appendTo($( self ));
break }
};
};
});
}
})( jQuery );
</script>
<title></title>
</head>
<body >
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
</div>
<div class="bottom">
<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера</span></p></div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text span").correctLines(3,' ...')
</script>
</body>
</html>

zlodiak
02.02.2013, 12:22
рони, ваш скрипт в боевых условиях не работает. http://prozaik.16mb.com/js/crop/

рони
02.02.2013, 16:10
zlodiak,
ваш скрипт в боевых условиях не работает
"Мой" (http://javascript.ru/forum/project/35168-jquery-plugin-obrezayushhijj-stroki.html) работает, а по поводу прежнего я советовал обратится к разработчику. и в указаном вами образце небыло вложенного тега <b>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin: 6px;
margin-right: 10px;

}
</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' // Класс для ссылки и скрытого текста
}, options);
return this.each(function (index, self) {
var txt = $(self).html().split(' ');
$(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/>").appendTo($(self))
$("<div/>", {
"text": txt.slice(i).join(" "),
"class": o.classNew
})
.appendTo($(self))
};
break
}
};
};
if (k <= o.maxLine) $(self).html(txt.join(' '));
});
}
})(jQuery);
</script>
<title></title>
</head>
<body >
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text">
<p><span><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text span").correctLines({fullText: true,maxLine: 3 })
</script>
</body>
</html>

рони
02.02.2013, 16:10
и даже не "мой" работает при настройке
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function(e){e.fn.correctLines=function(h,j){retur n this.each(function(p,d){var c,b;h=(c=/^(?:.*\s)?fixline_([\d]+)(?:\s.*)?$/.exec(d.className))&&c[1]||h||3;j=j||"...<br />";b=e(d).css("display");c=e(d).css("display","block").clone(!0).css({height:"auto",position:"absolute",width:d.offsetWidth+"px"}).html("");e(d).css("display",b).after(c);for(var k=0,m=0,l=0,n=0,f=-1,a=e(d).html(),g=[];/(<.*)\s(.*>)/g.exec(a);)a=a.replace(/(<.*)\s(.*>)/g,"$1&jftF767Tgjk56&$2");a=a.split(" ");for(b=0;b<a.length&& !(a[b]=a[b].replace(/&jftF767Tgjk56&/g," "),c[0].innerHTML+=a[b]+" ",c[0].clientHeight>l&&(k=l,n=f+1,f=b-1,l=c[0].offsetHeight,++m>h));b++);if(m>h){e(d).css({height:k+"px",overflowY:"hidden"});g=a.slice(n,f+1);k=c.html(g.join(" "))[0].offsetHeight;for(b=g.length-1;0<=b;b--)if(c.html(g.join(" ")+j),c[0].offsetHeight>k)g.splice(b,1),f--;else break;a[f]+=j;a.length=f+1;e(d).html(a.join(" "))}else e(d).css({height:"auto"});c.remove()})}})(jQuery);
</script>
<title></title>
</head>
<body>
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text">
<p><span><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text span b,.text span").correctLines(3,'')
</script>
</body>
</html>

zlodiak
02.02.2013, 16:58
вот условие задачи из первого поста
у меня есть такой . но он не подходит потому что нужно указывать конкретный родительский блок. при этом если в нём окажется вложенный например span, то скрипт не обрабатывает текст

ваше решение как раз основывается на указании конкретного родительского блока

рони
02.02.2013, 18:07
zlodiak, скрипт ниже работает с тегами любой вложености типа <p><span><b><b><b><b><b>ТУТ ТЕКСТ</b></b></b></b></b></span></p> достаточно указать любого из родителей
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin: 6px;
margin-right: 10px;

}
</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' // Класс для ссылки и скрытого текста
}, options);
return this.each(function (index, self) {
$(self).find('*:last').length && (self=$(self).find('*:last'));
var txt = $(self).html().split(' ');
$(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/>").appendTo($(self))
$("<div/>", {
"text": txt.slice(i).join(" "),
"class": o.classNew
})
.appendTo($(self))
};
break
}
};
};
if (k <= o.maxLine) $(self).html(txt.join(' '));
});
}
})(jQuery);
</script>
<title></title>
</head>
<body >
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text">
<p><span><b><b><b><b><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></b></b></b></b></span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
<div class="bottom">
<div class="text2">
<p><span><b><b><b><b><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></b></b></b></b></span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text p").correctLines({fullText: true,maxLine: 3 })
$(".text2 span").correctLines({fullText: false,maxLine: 4,afterLength: " \u26B9\u26B9\u26B9" })
</script>
</body>
</html>

rikitiki
17.06.2015, 21:24
рони, ваш скрипт для фиксированого количества символов? То есть, если сужать дивы, то количество строк увеличивается.

Столкнулся с такой проблемой, что на тестовом сайте на wordpress-woocommerce не могу найти, как настроить сетку товаров. Из-за разницы в длине названий товаров ценник и кнопка "Добавить в корзину" смещается вниз у элементов с длинным названием и остается на месте у элементов с коротким. Получается очень некрасивая "лесенка":

http://s03.radikal.ru/i176/1408/17/05aeb558d3f7.png

Единственным выходом выровнять строки с товарами - это установить фиксированную высоту заголовков. К примеру на три строки.
При этом длина заголовков превышающая строки должна обрезаться с появлением трёх точек.
В CSS можно сделать обрезку, применив для класса заголовков витрин такой стиль:

.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Текст адаптивно обрезается, три точки появляются, но к сожалению заголовки в этом случае становятся однострочными.:(
Такая уж печальная особенность у text-overflow: ellipsis

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

Но вот недавно увидел страницу одного солидного интернет-магазина:

http://www.obi.ru/decom/category/%D0%92%D0%B0%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B8_%D0%BA %D1%83%D1%85%D0%BD%D1%8F/%D0%92%D0%BE%D0%B4%D0%BE%D0%BD%D0%B0%D0%B3%D1%80%D 0%B5%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B8/%D0%92%D0%BE%D0%B4%D0%BE%D0%BD%D0%B0%D0%B3%D1%80%D 0%B5%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B8_%D0%BF%D1 %80%D0%BE%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D0%B5/1064

И на этой странице с товаром заголовки обрезаются как нужно.
То есть они в две строки с тремя точками по обрезке.
И если плавно изменять ширину окна браузера, то количество знаков (буквально по буквам!) в заголовках также меняется. Но две строки с тремя точками сохраняются чётко!

Пытался повторить это у себя на сайте с помощью плагина jQuery dotdotdot (http://dotdotdot.frebsite.nl/), но у меня с ним в заголовках в витрине товаров ничего не получилось. Хотя на отдельной странице режет нормально.

На всякий случай привожу одну из витрин моего сайта, в которой я пытаюсь подрезать заголовки и тем самым выровнять сетку: http://innka.info/product-category/uxod-za-kozhej/osnova-pod-makiyazh/
Обратите внимание как гуляют по высоте ценники. Вот это я и пытаюсь выровнять.
Спасибо за возможные ответы.

devote
18.06.2015, 09:11
rikitiki,
Используйте для блоков flexbox хотя с ним в ИЕ будет туго.. но есть шим (http://scottjehl.github.io/Respond/dest/respond.src.js), исправляющий проблему с ИЕ.

рони
18.06.2015, 09:39
То есть, если сужать дивы, то количество строк увеличивается.
добавлен параметр resize ... попробуйте новый вариант ... сейчас количество строк поддерживается при любом разрешении экрана.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
cursor: pointer;
color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin: 6px;
margin-right: 10px;

}
</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);

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>
<title></title>
</head>
<body >
<article class="item2">
<div class="top">
<h1>
<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
</h1>

<form class="variants" action="/cart">
<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton" style="display:none;"/>

<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

<a class="credit" href="#">В кредит</a>

</form>
</div>

<div class="bottom">
<div class="text">
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
<div class="bottom">
<div class="text2">
<p><span><b><b><b><b><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></b></b></b></b></span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
</div>
</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text p").correctLines({fullText: false,maxLine: 2 })
$(".text2 span").correctLines({fullText: false,maxLine: 2 })
</script>
</body>
</html>

rikitiki
19.06.2015, 23:54
Уважаемый Рони, большое спасибо за помощь!!! Я вставил ваш скрипт в Wordpress-Woocommerce и он отлично заработал.
Ниже привожу ссылку на страницу с витриной товаров, где ваш скрипт успешно подрезает заголовки и тем самым позволяет выровнять линейки товаров:
http://cosmetic.besaba.com/shop/
На этом сайте на бесплатном хостинге я обкатываю и проверяю те или иные решения, прежде чем выложить на платный хостинг.
Единственное, осмелюсь спросить - можно ли добавить в ваш скрипт обрезку в самих словах, то есть по всем элементам текста, а не только по пробелам?
А то сейчас, когда малость не умещается длинное слово, то появляется в конце после многоточия длинный пробел. А хотелось бы максимальной наполненности дивов, в которых размещены обрезанные заголовки. Посетитель и так поймёт что перед ним подрезанный текст и его не смутит, если в конце будет часть слова.
Собственно, так и решено в магазине OBI, ссылку на страницу которого я приводил в предыдущем посте.
Благодарю также Devote, за совет по использованию Flexbox. Признаться, раньше не обращал на Flexbox внимания, а сейчас с интересом прочёл несколько статей по нему.

рони
20.06.2015, 16:51
по всем элементам текста, а не только по пробелам?
убрать пробел между кавычками в одном split("") и четырёх join("")
строки 48 и 56, 62, 76, 84

рони
10.07.2015, 16:06
ещё вариант обрезния строк
<!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>

kostyanet
10.07.2015, 16:21
Столкнулся с такой проблемой

Это не проблема, а колхозная верстка.

rikitiki
21.02.2016, 22:49
Здравствуйте. Применил скрипт из поста #19 (http://javascript.ru/forum/375570-post19.html) к двум страницам маленького магазинчика, настроив его на подрезку в две строки троеточием
Когда товара мало, то скрипт справляется, хотя видно что режет с запозданием
http://innka.info/shirokoformatnaya-vitrina-woocommerce/
Но когда товара на странице много, то скрипт не успевает всё просчитать.
http://innka.info/vsyo-na-ves-ekran/
В моём Файерфоксе через некоторое время останавливается и пишет "Сценарий не отвечает". При этом часть товара внизу остаётся с неподрезанным текстом. Chrome и Opera кое-как справляются и со значительным запозданием доводят сценарий до конца.
Пересчёт возобновляется, если изменить ширину окна браузера. Скрипт вновь пересчитывает количество знаков под новую ширину.

рони
21.02.2016, 23:15
rikitiki,
возьмите в 19 новую версию... желательно бы ошибки исправить на странице ... а то у вас там ссылки в ссылках двоятся

rikitiki
22.02.2016, 00:24
Wordpress сам всегда вставляет на все страницы самую последнюю версию библиотеки. Поэтому строку
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>я не использую
rikitiki,
желательно бы ошибки исправить на странице ... а то у вас там ссылки в ссылках двоятся
Просто теряюсь, где искать? На странице каждая картинка с заголовком и ценником ведёт на соответствующую карточку товара. Это обусловлено кодом php, плагина Woocommerce.
Не было случая, чтобы я по ссылке попадал не туда куда нужно. Возможно вас смутили всплывающие подсказки, следующие за курсором.
http://innka.info/vsplyvayushhie-opisaniya-v-vitrinax-woocommerce/
Так это я старинный код, где-то нашёл и дополнил им витрину.
Сейчас с вашим кодом витрина смотрится идеально. На широкоформатном мониторе 1920х1080px аж в девять колонок.
И вариантов для подрезки мало
Код cssoverflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;умеет подрезать троеточием только одну строку
Кодoverflow: hidden;прячет, вылезший за фиксированный по высоте див, текст, но не умеет ставить троеточия.
А всякие там резалки на php типа substr не следует принимать во внимание, так как они работают на стороне сервера.
Остаётся только ваш код. но он к сожалению тормозит на тяжёлых страницах.

рони
22.02.2016, 00:42
rikitiki,
все блоки в li выглядять примерно так
<a href="http://innka.info/product/sprej-dlya-tela-krasnyj-chaj-i-inzhir/">
<a href="http://innka.info/product/sprej-dlya-tela-krasnyj-chaj-i-inzhir/">

<img width="225" height="225" src="http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-225x225.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1" srcset="http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-150x150.jpg 150w, http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-300x300.jpg 300w, http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-90x90.jpg 90w, http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-225x225.jpg 225w, http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1-350x350.jpg 350w, http://innka.info/wp-content/uploads/2014/01/18_deocolon_dlya_tela_krasnyi_chai_i_inzhir_1.jpg 500w" sizes="(max-width: 225px) 100vw, 225px" />
<div class="text"><p>Спрей для тела «Красный чай и инжир»</p></div>



<span class="price"><span class="amount">850&nbsp;<span class=rur >&#x440;<span>&#x443;&#x431;.</span></span></span></span>

</a>

</a>

рони
22.02.2016, 11:50
rikitiki,
пост 19 снова изменён, скопируйте по новой

rikitiki
22.02.2016, 14:46
Огромная благодарность за помощь!
Внёс исправления по части ссылок. Теперь на каждый товар только одна ссылка.
Для сравнения, создал копию страницы, в которой осуществляется скрытие чисто на CSS (фиксированная на две строки высота блока + overflow:hidden), то-есть без применения скрипта:
Всё на весь экран CSS (http://innka.info/vsyo-na-ves-ekran-css/)
Разумеется, в этом случае, троеточия отсутствуют, потому трудно разобрать, где полный заголовок, а где его часть.
Скопировал по новой ваш изменённый код из поста 19. Работает заметно быстрей, но хуже чем на CSS и к тому же, кое-где, изредка, выводит в три строки, а не в две. На старом скрипте такого не было.
Чтобы не перепутать, уточнил заголовок страницы со скриптом. Теперь она называется:
Всё на весь экран jQuery (http://innka.info/vsyo-na-ves-ekran/)
Ниже, на всякий случай, вдруг я что перепутал, привожу ваш код, скопированный со своего сайта:
/* Скрипт подрезки строк. Первая часть */
<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>

рони
23.02.2016, 02:43
rikitiki,
слишком много элементов перестраивать, нужен другой скрипт с технологией Virtual DOM ... пока мне такой не написать :(

rikitiki
23.02.2016, 19:05
rikitiki,
слишком много элементов перестраивать, нужен другой скрипт с технологией Virtual DOM ... пока мне такой не написать :(
Возможно скрипт dotdotdot (http://dotdotdot.frebsite.nl/) использует эту технологию. В описании скрипта на сайте автора есть упоминание о DOM.
Применил скрипт dotdotdot на своём сайте. Теперь загружается заметно быстрее и не зависает:
Всё на весь экран jQuery dotdotdot ('http://innka.info/vsyo-na-ves-ekran-jquery-dotdotdot/')
В связи с этим написал поясняющую статью:
Woocommerce - групповое cокращение заголовков товаров с помощью скрипта dotdotdot ('http://innka.info/woocommerce-gruppovoe-cokrashhenie-zagolovkov-tovarov-s-pomoshhyu-skripta-dotdotdot/')

рони
23.02.2016, 20:02
Возможно скрипт dotdotdot использует эту технологию.
нет тоже что у меня ... основной выигрыш фиксированная высота, меньше перерисовок ... главное чтоб из блока не выходил текст ... у меня алгоритм (текст добавляется частями) тот-же, но считаются строки ... хотелось бы иметь размеры виртуально, а выводить на экран уже результат.