3

Есть следующая конструкция:

<div class="wd">
<a href="#" class="abc"> Текст неопределённой длинны, например: Она была хороша во всём. А без всего - просто божественна. </a>
</div>

Необходимо у всех элементов на странице с классом "abc" после 50 символа обрезать строку и поставить троеточие.

Подскажите пожалуйста, как это реализовать с помощью скрипта?

2 ответа 2

9

Используйте .substring() или .substr().

UPDATE:

$(".abc").text(function(i, text) {

  if (text.length >= 50) {
    text = text.substring(0, 50);
    var lastIndex = text.lastIndexOf(" ");       // позиция последнего пробела
    text = text.substring(0, lastIndex) + '...'; // обрезаем до последнего слова
  }
  
  $(this).text(text);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div>
  <div class="abc">Текст неопределённой длинны, например: Она была хороша во всём. А без всего - просто божественна.</div>

  <div class="abc">Lorem Ipsum - это текст, часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной рыбой для текстов на латинице с начала XVI века.</div>

  <div class="abc">Тут меньше чем 50 сиволов</div>
</div>

О функции .text()

9
  • Изначально наверно не совсем корректно задал вопрос, обновил его, смысл в том что надо найти на странице все элементы с классом "abc" и все их порезать после 50 символов, добавив троеточие, как это сделать с помощью вашего решения, можете по подробнее рассказать?
    – Slava
    17 авг 2017 в 5:20
  • Отлично, все работает как и хотелось! Поначалу скрипт из ссылок делал простой текст, но добавил $(".abc a") и все вообще стало как нужно! Большое спасибо!
    – Slava
    17 авг 2017 в 5:48
  • Всегда пожалуйста:)
    – user242433
    17 авг 2017 в 5:49
  • 1
    @slava, было бы ещё лучше, когда слова не обрезались. Т.е. в конце не было типа :" при..., Вместо привет...". Позже попробую сделать. Хотя я думаю в Гугле есть что-то подобное
    – user242433
    17 авг 2017 в 6:55
  • 1
    Да у меня тоже работает, огромное спасибо!
    – Slava
    17 авг 2017 в 20:16
4

Можно вообще без JavaScript, если для вёрстки:

p.clip {
  width: 400px; /* Можно ограничить и по длинне */
  white-space: nowrap; /* Запрещаем перенос строк */
  overflow: hidden; /* Обрезаем все, что не помещается в область */
  background: #fc0; /* Цвет фона */
  padding: 5px; /* Поля вокруг текста */
  text-overflow: ellipsis; /* Добавляем многоточие */
}
<p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы, 
в таком случае эксцентриситеты и наклоны орбит возрастают.</p>

5
  • Условием было конкретно после определенного кол-ва символов.
    – user242433
    17 авг 2017 в 5:48
  • @Cactus обновил, теперь длина примерно 50 символов :) 17 авг 2017 в 5:53
  • :DDDDDD, сойдет!) А если надо, чтобы ширина была в 100px, но что-бы было 50 слов? Увы, способ не подойдёт..
    – user242433
    17 авг 2017 в 5:54
  • 1
    @socode у меня текст в нескольких строках и количество строк на разных страницах по разному, поэтому в моем конкретном случае css не помощник.. можно было бы попытаться с помощью "-webkit-line-clamp" но во-первых не всеми браузерами поддерживается, во-вторых повторюсь количество строк меняется, так что я думаю тут надежнее скриптом
    – Slava
    17 авг 2017 в 5:55
  • @Slava ну в таком случае да :) 17 авг 2017 в 5:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.