Как ограничить количество символов и поставить троеточие в конце?

Question

[Evtera]

Здравствуйте. Есть . Как можно ограничить количество отображаемых на странице символов до, к примеру, 21 и добавить ... в конце?

Comments

[g33km]

Как вариант, задать блоку с текстом некоторую ширину, которая будет меньше ширины текста, запретить перенос слов на новую строку. Дать ему свойства

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Пример:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio, assumenda quidem a ipsum inventore at optio reiciendis dicta, velit.</p>

p {
  outline: 1px solid red;
  width: 70px;
  white-space: nowrap;
   text-overflow: ellipsis;
  overflow: hidden;
}

Результат:

[Роман]

Пример с использованием JavaScript

/**
* Функция для сокращения длинного текста
* @var object element - элемент, в котором необходимо укоротить текст
* @var int count_lit - лимит символов
* @var bool light - true|false задать осветление последних символов или нет
*/
function cutLongString(element, count_lit, light){
    // текст в блоке
    var text = element.html();
    // длина текста в блоке
    var all_len = text.length;
    // хранилище для нового текста
    var new_text;
     
    // если текст больше заданного лимита, то обрезаем его
    if (all_len > count_lit){
        // обрезаем текст и добавляем три точки в конец
        new_text = text.substr(0, (count_lit - 3)) + '...';
        // если необходимо задать осветление последним символам
        if(light){
            // кусок обычного текста
            var first_part_text = new_text.substr(0, (count_lit - 10));
            // кусок текста, который будет осветлен
            var light_part_text = new_text.substr((count_lit - 10), count_lit);
            // переменная, для хранения осветленного текста
            var light_text = "";
            // цвета для последний 10 символов
            var array_color = ["#444444", "#545454", "#646464", "#747474", "#848484", "#949494", "#a4a4a4", "#b4b4b4", "#c4c4c4", "#d4d4d4"];
            // перебираем по одному символу текст, который будет осветлен
            for(var i = 0; i < 10; i ++){
                // оборачиваем каждый символ в span и задаем ему цвет
                light_text += "<span style='color: " + array_color[i] + "'>" + light_part_text.substr(i, 1) + "</span>";
            }
            // склеиваем две части текста
            new_text = first_part_text + light_text;
        }
        // заменяем текст в блоке
        element.html(new_text);
    }
}

Вызов функции:

$(document).ready(function(){
    // после загрузки страницы вызываем функцию
    // обрезание с осветлением
    cutLongString($('.example_div'), 21, true);
    // обрезание без осветления
    // cutLongString($('.example_div'), 21, false);
});

[Evtera]

g33km, гениально, спасибо