Как обрезать длинную строку по количеству символов css и js решение задачи

Добавление многоточия в конце текста можно добиться несколькими путями, в нашем распоряжение css и js.

demo

Для начала разберемся в задаче. Есть разметка блока

<div class="capital-news">
<ul>
<li class="tit">Много интересного текста о стилях, верстке, программированию и еще много интересного о сайтах</li>
<li class="tit">А как же нам поставить многоточие, если мы не можем ограничить блок размером?</li>
<li class="tit">Как на счет js скрипта? Он же может такое, правда</li>
<li class="tit">Хм, точно может. Вот держи код, он посчитает юникод символы и обрежет если нужно</li>
</ul>
</div>

надежный хостинг

Теперь необходимо добиться эффекта обрезания текста в каждом элементе списка, в добавок к этому нужно добавить многоточие.

Обрезка текста css

Для этого создадим стиль для класса tit
.tit {
white-space: nowrap; /* Отменяем перенос текста */
overflow: hidden; /* Обрезаем содержимое */
padding: 5px; /* Поля */
text-overflow: ellipsis; /* Многоточие */
}

Особенность этого решения заключается в том, что если текст поместится в размер блока, то многоточие не будет добавлено. Что не всегда является решением задачи.

Чаще всего необходимо обрезать текст по его длине и только после этого добавить точки.
Также встречаются задачи, когда необходимо в любом случае добавить точки (неважно какой длины текст, хоть 3 буквы). А если текст длиннее определенного размера, то его необходимо обрезать. В этом случае необходимо использовать скрипты.

Обрезаем текст по количеству символов и добавляем многоточие независимо от длинны

<script type="text/javascript">
function title() {
var elem, size, text;
var elem = document.getElementsByClassName('tit');
var text = elem.innerHTML;
var size = 75;
var n = 70;
for(var i = 0; i < elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > size) {
text = elem[i].innerHTML.substr(0,n);
}
else {
text = elem[i].innerHTML;
}
elem[i].innerHTML = text + '...';
}
}
title();
</script>

Что мы делаем?

Указываем скрипту какие именно элементы нужно обрабатывать.
Для этого в строке var elem = document.getElementsByClassName('tit'); указываем класс элемента (он должен быть одинаковый).

Затем необходимо задать размер текста до его обрезки. Это наши короткие строки к которым будет добавлено многоточие. За это отвечает переменная var size = 75;

Дальше мы указываем размер до, которого нужно обрезать текст если он очень длинный. За это отвечает строка var n = 70;

Теперь скрипт должен пройти по всем элементам с нужным классом и проставить многоточие.
Скрипт проверяет длину каждой строки и обрезает текст если его длинна превышает 75 символов. Если длинна меньше, то просто добавляется многоточие (строка if(elem[i].innerHTML.length > size) ).

Работу скрипта вы можете посмотреть на demo странице. На этом все, теперь вы знаете как обрезать длинный текст различными методами.

надежный хостинг
Поделиться в социальных сетях: