Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   скрипт, обрезающий строки (https://javascript.ru/forum/dom-window/35158-skript-obrezayushhijj-stroki.html)

zlodiak 01.02.2013 10:58

скрипт, обрезающий строки
 
посоветуйте пожалуйста скрипт, который может обрезать в блоке текст до определённого количества строк

у меня есть такой . но он не подходит потому что нужно указывать конкретный родительский блок. при этом если в нём окажется вложенный например 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/project/2...tml#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){return 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,
Цитата:

Сообщение от zlodiak
ваш скрипт в боевых условиях не работает

"Мой" работает, а по поводу прежнего я советовал обратится к разработчику. и в указаном вами образце небыло вложенного тега <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){return 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 не могу найти, как настроить сетку товаров. Из-за разницы в длине названий товаров ценник и кнопка "Добавить в корзину" смещается вниз у элементов с длинным названием и остается на месте у элементов с коротким. Получается очень некрасивая "лесенка":



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

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

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

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

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

http://www.obi.ru/decom/category/%D0...%8B%D0%B5/1064

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

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

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

devote 18.06.2015 09:11

rikitiki,
Используйте для блоков flexbox хотя с ним в ИЕ будет туго.. но есть шим, исправляющий проблему с ИЕ.

рони 18.06.2015 09:39

Цитата:

Сообщение от rikitiki
То есть, если сужать дивы, то количество строк увеличивается.

добавлен параметр 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

Цитата:

Сообщение от rikitiki
по всем элементам текста, а не только по пробелам?

убрать пробел между кавычками в одном 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
Столкнулся с такой проблемой

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

rikitiki 21.02.2016 22:49

Здравствуйте. Применил скрипт из поста #19 к двум страницам маленького магазинчика, настроив его на подрезку в две строки троеточием
Когда товара мало, то скрипт справляется, хотя видно что режет с запозданием
http://innka.info/shirokoformatnaya-...a-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>
я не использую
Цитата:

Сообщение от рони (Сообщение 408773)
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 не следует принимать во внимание, так как они работают на стороне сервера.
Остаётся только ваш код. но он к сожалению тормозит на тяжёлых страницах.

рони 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..._1-300x300.jpg 300w, http://innka.info/wp-content/uploads...ir_1-90x90.jpg 90w, http://innka.info/wp-content/uploads..._1-225x225.jpg 225w, http://innka.info/wp-content/uploads..._1-350x350.jpg 350w, http://innka.info/wp-content/uploads...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
Разумеется, в этом случае, троеточия отсутствуют, потому трудно разобрать, где полный заголовок, а где его часть.
Скопировал по новой ваш изменённый код из поста 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>

рони 23.02.2016 02:43

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

rikitiki 23.02.2016 19:05

Цитата:

Сообщение от рони (Сообщение 408894)
rikitiki,
слишком много элементов перестраивать, нужен другой скрипт с технологией Virtual DOM ... пока мне такой не написать :(

Возможно скрипт dotdotdot использует эту технологию. В описании скрипта на сайте автора есть упоминание о DOM.
Применил скрипт dotdotdot на своём сайте. Теперь загружается заметно быстрее и не зависает:
Всё на весь экран jQuery dotdotdot
В связи с этим написал поясняющую статью:
Woocommerce - групповое cокращение заголовков товаров с помощью скрипта dotdotdot

рони 23.02.2016 20:02

Цитата:

Сообщение от rikitiki
Возможно скрипт dotdotdot использует эту технологию.

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


Часовой пояс GMT +3, время: 10:13.