Четверг, 31 Января 2013 14:03

Обрезка длинного текста на JavaScript

Written by 
Оцени эту запись
(9 Голоса)

Хочу поделиться идеей, как можно обрезать длинный текст, если он не помещается в блок. Это нужно очень часто, при добавлении длинный заголовков статей в блоки заголовков или вступительного текста в блоке с анонсами статей. Сейчас я приведу пример простой JavaScript функции, которая будет оставлять только нужное количество символов в блоке, а остальное обрезать, заменяя троеточием. Прошу заметить, что текст будет обрезаться окончательно. Если вам нужно будет далее использовать данную строку, запоминайте содержимое блока до обрезки. 

 

 

 

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

 

Вот так будет выглядеть наш блок:

 

 

<div id="long_text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>

 

 
 
 
В теперь прописываем функцию, для обрезки длинного текста:
 
 
 
<script>
            function cutLongText() {
                var elem, size, text;
                elem = document.getElementById('long_text');
                text = elem.innerHTML;
                size = 40;
                if (text.length > size) {
                    text = text.slice(0, 40);
                }
                elem.innerHTML = text + '...';
            }
</script>
 
 
Поясню идею.
 
 
 
Берем наш блок с текстом:
 
 
 
elem = document.getElementById('long_text');
 
 
 
Задаем переменной text значение содержимого блока, то есть нужную строку:
 
 
 
text = elem.innerHTML;
 
 
Задаем параметр size, который будет указывать для нужное количество символов в блоке. Пускай этот параметр будет равен 40.
 
 
 
size = 40;
 
 
 
А теперь будем выполнять основные действия -- если длина строки превышает значение size, мы ее обрезаем при помощи функции slice:
 
 
 
if (text.length > size) {
         text = text.slice(0, 40);
}
 
 
Метод slice(param1, param2), примененный к строке, возвращает подстроку начиная с номера позиции, заданной в первом аргументе, до номера позиции, заданной во втором аргументе. Второй аргумент не обязателен. Если он отсутствует, то строка передается до конца. Подстрока, которая возвращается при применении метода slice не включает позицию, заданную во втором аргументе(строка до этой позиции).
 
 
И остался последний штрих -- меняем содержимое нашего блока на полученную подстроку + троеточие:
 
 
 
elem.innerHTML = text + '...';
 
 
 
Живой пример кода:
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 
 
 
 
 
 
 
 
 

Additional Info

Комментарии  

 
0 #13 Дмитрий 14.05.2014 05:26
Код обрезался!!
 
 
0 #12 Дмитрий 14.05.2014 05:24
Не работает ваш пример! :sad:
Я даже было чуть уменьшил длину текста:





function cutLongText() {
var elem, size, text;
elem = document.getElementById('long_text');
text = elem.innerHTML;
size = 10;
if (text.length > size) {
text = text.slice(0, 10);
}
elem.innerHTML = text + '...';
}



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 
 
+1 #11 kat-khmara 14.01.2014 08:58
При обращении к классу, Вы получите массив элементов. Соответственно,
var elem = [], size, text = [];
и вместо строки text = elem.innerHTML; нужно пройтись по массиву:

for (i = 0; i < elem.length; i++) {
text = elem.innerHTML;
}

и т.д.
 
 
0 #10 Алексей 13.01.2014 19:05
Ваш пример - отлично подходит для ID, но могу ли я обратиться ко всему классу на странице чтобы обрезать его по количеству символов? я пробовал использовать такую конструкцию:

function cutProductext() {
var elem, size, text;
elem = document.getEle mentsByClassNam e('product-name ');
text = elem.innerHTML;
size = 40;
if (text.length > size) {
text = text.slice(0, 40);
}
elem.innerHTML = text + '...';
}


но результат - отрицательный.
 
 
0 #9 kat-khmara 15.11.2013 11:07
Я абсолютно не против jquery, тем более, что это кроссбраузерно. Но если на сайте нужны только мелкие правки, то нет смысла подключать для этого библиотеку. А вы как считаете?
 
 
+2 #8 pushkin5241 14.11.2013 23:24
Лучше тогда использовать в связки с JQuery
function cutLongText() {
var elem, size, text;
size = 100;
elem = $('.post-excerp t p');
$.each(elem,function(){
text = $(this).html();
if (text.length > size) {text = text.slice(0, size);}
$(this).html(text + '...');
});
}
 
 
-1 #7 kat-khmara 19.07.2013 07:43
А я считаю, что каждый может выбирать самый удобный для себя вариант.
Когда мне нужно было ограничить блок с текстом по размеру, я просто задавала ему overflow:hidden и всех это устраивало)) А еще нужно учитывать, что ширина символов может быть разной... Да и нет смысла использовать js, если он только для этого момента нужен.
А количество символов можно ограничить при помощи, например, PHP.
 
 
+1 #6 DangelZM 18.07.2013 16:30
Цитирую alah:
DangelZM, советую немного ознакомится со свойством text-overflow ;-)
Скажу что без js (в том числе xml, jquery и т.п.) реализация данного примера невозможна :-*
Отлично подходит для реализации новостей :-)


Бред, куда ни шло js, ну преплитать сюда формат передачи данных и библиотеку которая сама по себе тоже javascript. По моему это вам alah, нужно не вмешиваться в то в чем вы не компетентны.
 
 
0 #5 alah 18.07.2013 14:56
DangelZM, советую немного ознакомится со свойством text-overflow ;-)
Скажу что без js (в том числе xml, jquery и т.п.) реализация данного примера невозможна :-*
Отлично подходит для реализации новостей :-)
 
 
0 #4 kat-khmara 01.07.2013 13:27
Спасибо за рефакторинг кода)) Я в блоге пишу о том, как можно самому что-то сделать, я не скачать и подключить. Действительно существуют готовые решения.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов