Обрезка лишнего текста, есть проблема

[nikolokaputik80]

Привет!
помогите пожалуйста со скриптом, есть такой рабочий код
он обрезает лишник код

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

<div id="title">В названии очень много текста и мне нужно его обрезать</div>


<script>
function title() {
var elem, size, text;
elem = document.getElementById('title');
text = elem.innerHTML;
size = 40;
if (text.length > size) {
text = text.slice(0, 30);
}
elem.innerHTML = text + '...';
}
title();
</script>

но есть проблема у меня 20 таких заголовков

<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">В названии очень много текста и мне нужно его обрезать</div>

и в браузере идет обрезка только первой верхней строки, вот пример вывода браузера

В названии очень много текста...
В названии очень много текста и мне нужно его обрезать
В названии очень много текста и мне нужно его обрезать
В названии очень много текста и мне нужно его обрезать
В названии очень много текста и мне нужно его обрезать
В названии очень много текста и мне нужно его обрезать


вопрос как мне сделаь что бы выводило
В названии очень много текста...
В названии очень много текста...
В названии очень много текста...
В названии очень много текста...
В названии очень много текста...
В названии очень много текста...

т.е. резало везде текст который
находится в

<div id="title">текст который нужно резать</div>

спасибо жду ответа.

[Serge_Bliznykov]

но есть проблема у меня 20 таких заголовков

Код HTML:
<div id="title">В названии очень много текста и мне нужно его обрезать</div>
<div id="title">....

Ваш HTML нарушает правила. ID на то и ИДЕНТИФИКАТОР, чтобы не повторяться!

вот пример, если используете класс:

<div class="title">В названии очень много текста и мне нужно его обрезать</div>
<div class="title">В втором названии тоже очень много текста и мне нужно его обрезать</div>
<div class="title">А в третьем названии очень много текста и мне нужно его обрезать</div>
<div class="title">Вот и другое название, тут очень много текста и мне нужно его обрезать</div>


<script>
function title() {
  var size = 40;
  // var elem = document.getElementsByClassName("title");
  var elem = document.querySelectorAll('.title');
  for (var i=0; i<elem.length; i++) {
     //elem[i] - i узел в коллекции NodeList
     var text = elem[i].innerHTML;
     if (text.length > size) {
       text = text.slice(0, 30);
      elem[i].innerHTML = text + '...';
     }
  }
}
title();
</script>

[nikolokaputik80]

Спасибо вам за оперативность ответа и разьяснения про ид.

[Naive]

http://jsfiddle.net/naiveMan/9r08g92r/ - так это делается

[Serge_Bliznykov]

Сообщение от Naive

http://jsfiddle.net/naiveMan/9r08g92r/ - так это делается

.cropped {
    width: 233px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

круто!
а я так не умею...

[Naive]

Сообщение от Serge_Bliznykov

круто!
а я так не умею...

Теперь умеешь