各容器のスライステキスト

Question

ここでの質問は非常に簡単です。

<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> 

アイデアは乗算タイトル、画像、簡単な説明と、「ブログ記事」を持っている、とボタン「続きを読む」ことです：私は、次のHTMLコードを持っています。私は "テキスト"を元のテキストサイズから短縮して、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の内容は、300substringです。あなたのケースでは

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