Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице

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

рони 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 внимания, а сейчас с интересом прочёл несколько статей по нему.


Часовой пояс GMT +3, время: 03:03.
Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице