1

Сделал плагин для обрезки текста если символов более 100, он добавляет три точки если символов больше. Проблема в том, что он делает это и обрезает не законченные слова. Нужно добавить условие при котором он будет ставить три точки после того как достигнуто максимальное число символов и сделан пробел (то есть слово прошло)

$(function() {
    function cutLongText(textSize, finalLength) {
        $('.news__default-mainnews-item-text').each(function() {
            if ($(this).text().length > textSize) {
                $(this).html($(this).text().slice(0, finalLength) + '...');
            }
        })
    }
    cutLongText(100, 100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news__default-mainnews-item-text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

Всем заранее огромное спасибо за любое содействие в решении моей проблемы!

1
  • $('.t').each((i,e)=>$(e).text($(e).text().split(' ').reduce((a,w)=>a.length>99?a:a+' '+w)+'...')) 11 июн 2019 в 15:05

3 ответа 3

1

По примеру из EnSO: Truncate A String In jQuery

$(function() {
    function cutLongText(textSize, finalLength) {
        $('.news__default-mainnews-item-text').each(function() {
            if ($(this).text().length > textSize) {
                $(this).html($(this).text().slice(0, finalLength).split(" ").slice(0, -1).join(" ") + '...');
            }
        })
    }
    cutLongText(100, 100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news__default-mainnews-item-text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

Можно меньше движений через двойную обрезку и временную переменную.

$(function() {
    function cutLongText(textSize, finalLength) {
        $('.news__default-mainnews-item-text').each(function() {
            if ($(this).text().length > textSize) {
                let text = $(this).text().slice(0, finalLength);
                text = text.slice(0, text.lastIndexOf(" "));
                $(this).html(text + '...');
            }
        })
    }
    cutLongText(100, 100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news__default-mainnews-item-text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

0

$(function() {
    function cutLongText(maxLength) {
        $('.news__default-mainnews-item-text').each(function() {
            let text = $(this).text();
            if (text.length > maxLength) {
                let words = text.split(' '); // разбиваем на слова
                let result = words.shift(); // Начиная с первого слова
                for (let word of words) {
                   // Пока влезают в maxLength
                   if (result.length + 1 + word.length > maxLength - '...'.length) break; 
                   result += ' ' + word; // Добавляем по слову
                }
                
                $(this).text(result + '...');
            }
        })
    }
    cutLongText(100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news__default-mainnews-item-text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

А можно применить CSS text-overflow

0

$(function() {
  function cutLongText(textSize, finalLength) {
    $('.news__default-mainnews-item-text').each(function() {
      const el = $(this);
      const text = el.text();
      if (text.length > textSize) {
        let newText = text.slice(0, finalLength);
        // Проверяем, является ли первый обрезанный символ буквой
        if (/[A-Za-zА-Яа-я]/.test(text.charAt(finalLength))) {
          // если да, то обрезаем дополнительно все буквы до конца строки
          newText = newText.replace(/ *[A-Za-zА-Яа-я]+$/, "");
        }
        el.text(newText + "...");
      }
    });
  }
  cutLongText(100, 100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news__default-mainnews-item-text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

Ваш ответ

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

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