обрезать строки

cyklop77 · February 2, 2013

помогите пожалуйста найти скрипт, обрезающий строки

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

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

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

вот пример кода


<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 <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="Добавлено" />[/font][/color]
   <a class="credit" href="#">В кредит</a> 

   <span class="price">42 000 <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>

вот попытка решения http://prozaik.16mb.com/js/crop/

Николя223 · February 2, 2013

методом проб и ошибок нашёл .text()

получилось вот так. можно результат в любые теги оборачивать

http://jsfiddle.net/nUps9/

Edited February 2, 2013 by Николя223

cyklop77 · February 2, 2013

методом проб и ошибок нашёл .text()
получилось вот так. можно результат в любые теги оборачивать
http://jsfiddle.net/nUps9/

как я понял, в вашем решении происхрдит выделение трёх первых предложений, которые должны обязательно заканичиваться последовательностью символов: точка, пробел. это не решение имхо

sigma77 · February 2, 2013

http://jsfiddle.net/fainz777/Fjypu/

Николя223 · February 2, 2013

хорошо. тоже думал о overflow. вариантов то много...

cyklop77, тогда скажите, чем вас не устраивает тот вариант, который вы привели? тем что он обрезает теги?

можно объединить два варианта. Сначала с помощью text() избавляемся от тегов, а затем использовать ваш плагин...

либо уже с другого ракурса идти. детально разбирать какие теги находятся, затем использовать Ваш .correctLines( 3, '' ) а затем теги закрывать,

или же действительно через overflow...

И ещё вот какая идея... обязательно три строки? можно SPLIT()-ом разбирать текст на отдельные символы и циклом выводить первые сто... (это дополнение к моему варианту)

Edited February 2, 2013 by Николя223

cyklop77 · February 2, 2013

хорошо. тоже думал о overflow. вариантов то много...
cyklop77, тогда скажите, чем вас не устраивает тот вариант, который вы привели? тем что он обрезает теги?
можно объединить два варианта. Сначала с помощью text() избавляемся от тегов, а затем использовать ваш плагин...
либо уже с другого ракурса идти. детально разбирать какие теги находятся, затем использовать Ваш .correctLines( 3, '' ) а затем теги закрывать,
или же действительно через overflow...
И ещё вот какая идея... обязательно три строки? можно SPLIT()-ом разбирать текст на отдельные символы и циклом выводить первые сто... (это дополнение к моему варианту)

не устраивает тем, что невозможно угадать какие тэги будет использовать контент-менеджер

о комбинировании не подумал, действительно, возможно, получится решить проблему таким способом

решение сигмы77 конечно привлекательнее. теоретически все браузеры должны отображать результат одинаково

Николя223 · February 2, 2013

теоретически. там использованно text-overflow. но он работает только почему то с одной строкой, с несколькими строками троеточие не ставиться

cyklop77 · February 2, 2013

да. но мне оно не нужно

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

Николя223 · February 2, 2013

а можно ссылку на ваш сайт?

cyklop77 · February 2, 2013

а можно ссылку на ваш сайт?

он на localhost

Edited February 2, 2013 by cyklop77

sigma77 · February 2, 2013

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

Разницы нету. С em просто чуть гибче получается.

В общем виде высота = n * line-height, где n - количество строк.

keltanas · February 3, 2013

Была даже статья на сайте об этом. Мне кажется симпотичным способ с градиентом. Только в вашем случае можно сделать его горизонтальным.

wwt · February 3, 2013

Можно с помощью регулярки http://jsfiddle.net/sxwgs/

на jquery http://jsfiddle.net/sxwgs/1/

Edited February 3, 2013 by wwt

cyklop77 · February 3, 2013

Можно с помощью регулярки http://jsfiddle.net/sxwgs/
на jquery http://jsfiddle.net/sxwgs/1/

у вас отрезается 250 символов. а нужно 3 строки

wwt · February 4, 2013

Можно с помощью регулярки http://jsfiddle.net/sxwgs/
на jquery http://jsfiddle.net/sxwgs/1/
у вас отрезается 250 символов. а нужно 3 строки

Что вам мешает подобрать нужное количество символов, чтобы визуально с выставленными настройками шрифта вмещалось 3 строки?

Николя223 · February 4, 2013

wwt, можно примерчик? как сделать так, чтоб детально не разбирать контент(у автора в нем случайные теги), попытаться ещё и их учесть?

Edited February 4, 2013 by Николя223

wwt · February 5, 2013

wwt, можно примерчик? как сделать так, чтоб детально не разбирать контент(у автора в нем случайные теги), попытаться ещё и их учесть?

Тогда лучше сделать как советовали выше, с обрезанием строки все таки будет проблема в случае если разорвет тег какойнить. Такой способ подходит только если обрезать нужно не форматированную строку, либо можно проигнорировать форматирование и отбросить теги. Edited February 5, 2013 by wwt

cyklop77 · February 9, 2013

http://jsfiddle.net/fainz777/Fjypu/

больше беспокоит то, что размер у меня указан не в em, а в пикселях. беспокоюсь не будут ли разные браузеры с разными настройками и стандартами текста отображать текст различно. вследствие чего часть текста некрасиво обрежется. подскажите пожалуйста, кто в теме
Разницы нету. С em просто чуть гибче получается.
В общем виде высота = n * line-height, где n - количество строк.

к сожалению ваш способ не работает.так выглядит результат в последней версии маковского FF при изменении масштаба(ctrl +)

ссылку на рабочий сайт опубликовать пока не могу. вот ссылка на идентичный код

Edited February 9, 2013 by cyklop77

wwt · February 9, 2013

http://jsfiddle.net/fainz777/Fjypu/
больше беспокоит то, что размер у меня указан не в em, а в пикселях. беспокоюсь не будут ли разные браузеры с разными настройками и стандартами текста отображать текст различно. вследствие чего часть текста некрасиво обрежется. подскажите пожалуйста, кто в теме
Разницы нету. С em просто чуть гибче получается.
В общем виде высота = n * line-height, где n - количество строк.
к сожалению ваш способ не работает.так выглядит результат в последней версии маковского FF при изменении масштаба(ctrl +)
ссылку на рабочий сайт опубликовать пока не могу. вот ссылка на идентичный код

Во многих CMS на сколько помню для таких вещей сущестует 2 поля задания контента, одно для превью другое фул контент. Это идеальный способ на мой взгляд. Может быть ва мстоит модифицировать php скрипт добавив поле ввода и столбец в БД и решить этот вопрос централизованно не изобретая велосипедов.

cyklop77 · February 9, 2013

каким образом это поможет решить мою задачу?

поля, про которые вы говорите есть

пусть для одного товара контент-менеджер забил аннотацию из 1000 симоволов, для другого - из 100. на фронте должно отображаться и для первого товара, и для второго по 3 строки

Edited February 9, 2013 by cyklop77

wwt · February 11, 2013

каким образом это поможет решить мою задачу?
поля, про которые вы говорите есть
пусть для одного товара контент-менеджер забил аннотацию из 1000 симоволов, для другого - из 100. на фронте должно отображаться и для первого товара, и для второго по 3 строки

В поле аннотации ограничить количество вводимых символов.

cyklop77 · February 11, 2013

каким образом это поможет решить мою задачу?
поля, про которые вы говорите есть
пусть для одного товара контент-менеджер забил аннотацию из 1000 симоволов, для другого - из 100. на фронте должно отображаться и для первого товара, и для второго по 3 строки
В поле аннотации ограничить количество вводимых символов.

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

мне решение проблемы уже давно не нужно, просто интересно порассуждать

Edited February 11, 2013 by cyklop77

Sign In

обрезать строки

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information