在每個容器中切片文字

Question

對於你們大多數人來說，這個問題非常簡單。我有下一個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中。我已經嘗試過循環和while循環，抱歉，我是新手，無法自己弄清楚。

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

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

這看起來愚蠢的，但我已經嘗試不同的東西，這是最後一個我帶着。

希望你的幫助。感謝您的時間。我很感激。

Answer 1

對此，您不應使用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)

Answer 2

試試這個：

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) + " ..."; 
    } 
}