Хочу поделиться идеей, как можно обрезать длинный текст, если он не помещается в блок. Это нужно очень часто, при добавлении длинный заголовков статей в блоки заголовков или вступительного текста в блоке с анонсами статей. Сейчас я приведу пример простой 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,