Как с помощью JS сделать ограничение количества символов

Характеристика Описание [xfgiven_gallery]Галерея[/xfgiven_gallery] [xfgiven_video]Презентация[/xfgiven_video]

Технические характеристики шаблона

[xfgiven_templ-version]

Версия шаблона: [xfvalue_templ-version]

[/xfgiven_templ-version]

Версия DLE: 10.x - 12

Верстка: HTML/CSS/JS

Тип верски / Ширина шаблона: Блочная, адаптивная / 320px-1170px

Кроссбраузерность: Firefox, Chrome, Opera, Yandex, IE9-11, мобильные устройства;

[xfgiven_tematika]

Тематика: [xfvalue_tematika]

[/xfgiven_tematika] [xfgiven_doppole]

Использование дополнительных полей: Да

[/xfgiven_doppole]

Обновления и тех. поддержка: в течении одного года с момента покупки

Шаблон имеет первоначальную SEO-оптимизацию

Описание шаблона

Очень часто вебмастера задаются вопросом, как сделать ограничение на количество символов в заголовках либо в обычном тексте, чтобы в фиксированных блоках не плыла верстка. Вот один из способов решен при помощи JS.

1. В любой файл с расширением js добавить в самый низ:

function maxSymbols ($elem, num, fadeLength) {
    var text = $elem.text(),
        temp = text.split(''),
        step,
        fade,
        result;
    
    if (!fadeLength) {
        fadeLength = 10;
    }
    
    fade = temp.slice(num - fadeLength, num);
    temp.length = num - fadeLength;
    
    result = temp.join('');
    
    for (var i = 0; i < fadeLength; i++) {
        step = +(1 - (1 / fadeLength * i)).toFixed(2);
        result += '<span style="opacity: ' + step + '">' + fade[i] + '</span>';
    }
    
    $elem.html(result);
}

// ограничим текст в блоке до 100 символов
// причем последние 20 будут исчезать с эффектом fadeOut
maxSymbols($('.test'), 100, 20);

2. Добавить класс к тексту, в котором необходимо сократить количество символов:

<div class="test">Zapilim.net - веб-студия по разработке шаблонов, сайтов. мы оказываем качественные услуги в области веб технологий. На нашем портале Вы сможете найти  различные [url=http://zapilim.net/theme/]шаблоны для DLE[/url], ответы на вопросы...</div>
[xfgiven_gallery]
[/xfgiven_gallery] [xfgiven_video]

Презентация шаблона

[/xfgiven_video]