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

Question

[lavezzi1]

Есть bootstrap блок в сетке, подскажите пожалуйста как сделать органичение по максимальному числу символов? Если описание блока превышает опред. кол-во символов, то оно сокращается, желательно с эфектом fade out. Спасибо

Answer 1

[Денис Инешин]

Вот накидал по быстрому на JS: jsfiddle.net/IonDen/s6oxe5jj

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);

Comments

[Иван Соломенников]

Переменную i забыли объявить.

[lavezzi1]

Спасибо. А что с переменной i?

[Денис Инешин]

capable: fixed

[lavezzi1]

Денис Инешин: Применял на свой сайт. Для каждго блока с текстом прописал class="test". В итоге теперь в каждом параграфе одинаковый текст стоит, хотя в html он разный.

[Денис Инешин]

lavezzi1: вы неправильно делаете: jsfiddle.net/IonDen/s6oxe5jj/3

[lavezzi1]

Посмотри те Денис Инешин: пожалуйста jsfiddle.net/s6oxe5jj/4

[Денис Инешин]

lavezzi1: jsfiddle.net/IonDen/s6oxe5jj/5 в функции не было проверки на случай если кол-во символов умещается в диапазон

[lavezzi1]

Денис Инешин: спасибо!

[Jokerrs567]

Денис Инешин, работает четко, но цифры почему-то считает с погрешностью. Не то чтобы проблема, накинул 30 символов сверху и работает как надо. Или я дурной и чего-то не понимаю