Разрезать текст в каждом контейнере

Question

Разрезать текст в каждом контейнере

1

Вопрос очень прост для большинства из вас здесь. У меня есть следующий код HTML:

<div class="content" id="content">
    <div class="container" id="container">
        <h1>Title</h1>
        <img class="post-img" src="#">
        <p class="text" id="text">Lorem500</p>
        <div class="button"></div>    
    </div>
    <hr>
    <div class="container" id="container">
        <h1>Title</h1>
        <img class="post-img" src="#">
        <p class="text" id="text">Lorem500</p>
        <div class="button"></div>    
    </div>
    <hr>
</div>

Идея состоит в том, чтобы размножать "записи в блогах" с заголовком, изображением, сокращенным описанием и кнопкой "Читать дальше". Я хочу, чтобы "текст" укоротил его исходный размер текста, чтобы сказать 300 символов. Я хочу, чтобы это было в JS. Я пробовал цикл и цикл, жаль, что я новичок в этом и не могу понять это сам.

var content = document.getElementById('content');

while ( content.length >= 0 ) {
  $('#text').text(function(i, txt) {
    return txt ? txt.slice(0, 300) + " ..." : txt;
  });
}

Это может выглядеть глупо, но я пробовал разные вещи, это последний, с которым я пришел.

Надеюсь на вашу помощь. Спасибо за ваше время. Я ценю его.

saha9 08 авг. 2017, в 13:11

Источник

0

какой вопрос?
Sagar V 08 авг. 2017, в 10:47

Теги:

javascript

for-loop

slice

2 ответа

Ещё вопросы

Chinmay jain · Answer 1 · 2017-08-08T08-14-00.000Z

Попробуй это:

var content = document.getElementById('content');
for(var i=0;i<$('.text').length;i++){
  var el = $('.text')[i];
  if(el.innerHTML.length>300){
    el.innerHTML = el.innerHTML.slice(0, 300) + " ...";
  }
}

hammy2899 · Answer 2 · 2017-08-08T07-59-00.000Z

Вы не должны использовать while или ее for циклы для этого. Это приведет к бесконечному циклу, поскольку длина содержимого всегда будет закончена

Что вам нужно сделать, так это сказать, if размер содержимого превышает 300 вы substring его.

var content = "Hello this is some longer text to be cut shorter";
var displayText = ""; // The shorter version of the content

if(content.length > 5) {
    displayText = content.substring(0, 5);
} else {
    // The next is shorter then 5 so just display the text
}

console.log(displayText) // Output: Hello

В вашем случае вы будете использовать content.length > 300 и content.substring(0, 300)