1

Всем привет! написал функцию для ограничения текста по символам, но не понимаю как результат вернуть в сам тег, чтобы изменения отобразились на странице, помогите плз

function changeText() {
var maxlength = 25; //количество символов, которое должно отображаться
var strNum = document.getElementsByClassName("text").length; //количество блоков с классом text
  for ( var i = 0; i < strNum ; i++ ) {
  var str = document.getElementsByClassName("text")[i].innerHTML; //текст
    alert( str.slice( 0, maxlength - 3 ) + '...') ;
  }
}

changeText();
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 1</div>

<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 2</div>

3 ответа 3

2

Только 3 раза не вызывать document.getElementsByClassName("text")

function changeText() {
  var maxlength = 25; //количество символов, которое должно отображаться
  var strGlobal = document.getElementsByClassName("text");
  var strNum = strGlobal.length; //количество блоков с классом text
  for (var i = 0; i < strNum; i++) {
    strGlobal[i].innerHTML = strGlobal[i].innerHTML.slice(0, maxlength) + '...';
  }
}

changeText();
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 1</div>

<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 2</div>

2

Можно решить это без JS, просто CSS-правилом:

.text {
  max-width: 280px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 1</div>
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 2</div>


Ну а если все-таки хотите JavaScript'ом, то рекомендую использовать современный синтаксис:

function changeText(selector, maxlength) {
  for (let el of document.querySelectorAll(selector)) {
    let txt = el.textContent; 
    if (txt.length > maxlength)
      el.textContent = txt.slice(0, maxlength - 3) + '...';
  }
}

changeText('.text', 25);
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 1</div>
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 2</div>

p.s.: Свойство innerHTML отвечает не за текст элемента, а за его внутренний HTML (что очевидно по названию).

1

Примерно так же, как вы его оттуда читаете:

function changeText() {
  var maxlength = 25; //количество символов, которое должно отображаться
  var strNum = document.getElementsByClassName("text").length; //количество блоков с классом text
  for ( var i = 0; i < strNum ; i++ ) {
    var str = document.getElementsByClassName("text")[i].innerHTML; //текст
    document.getElementsByClassName("text")[i].innerHTML = str.slice( 0, maxlength ) + '...';
  }
}

changeText();
<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 1</div>

<div class="text">Очень длинный текст, который нужно укоротить на пару символов и поставить в конце троеточие 2</div>

4
  • Спасибо, а почему так не получается ? str = str.slice( 0, maxlength ) + '...'; 7 июн 2018 в 10:36
  • 1
    @RickHangover Что не получается?
    – Darth
    7 июн 2018 в 10:44
  • 1
    Потомучто document.getElementsByClassName("text")[i].innerHTML это string, а не объект или массив и в переменную копируется только значение, а не передается по ссылке. 7 июн 2018 в 10:44
  • 1
    @Darth, У вас все правильно, он спрашивает, почему у него не работает). 7 июн 2018 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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