Блог

Мне нужно ограничить текст в моем абзаце слайдера, вызвав id, и этот текст вызывается из базы данных. Я использую symphony php framework, где каждый слайдер содержит отдельный абзац.

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

 <p id="slider-p">{{ property.description }} </p>

function ellipsify (str) {
     if (str.length > 100) {
         return (str.substring(0, 100)   "...");
     }
    else {
         return str;
     }

};
    var div = document.getElementById('slider-p');
    div.textContent = ellipsify(div.textContent);
 

Результат только для первого абзаца слайдера, содержащего текст ограничения. Я хочу, чтобы для всех каждый слайдер с ограничением содержал или текст.

Я думаю, ваш идентификатор не уникален. Атрибут id должен быть уникальным для документа. Если у вас есть несколько абзацев, которые вы хотите изменить, вам лучше использовать атрибут class:

 <p class="slider-p">{{ property.description }}</p>
<script>
var divs = document.getElementsByClassName('slider-p');
for(i=0; i<divs.length; i  )
{
    divs[i].textContent = ellipsify(divs[i].textContent);
}
</script>
 

Но… разве вам не будет проще использовать свойство CSS text-overflow? Тогда вам не придется бороться с длиной пикселя вашего текста.

 p.slider-p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}