在每个容器中切片文本答案

【问题标题】：Slice text in each container在每个容器中切片文本
【发布时间】：2018-01-15 21:34:44
【问题描述】：

对于大多数人来说，这个问题非常简单。我有下一个 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 中。我已经尝试过 for 循环和 while 循环，对不起，我是新手，自己无法弄清楚。

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

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

这可能看起来很愚蠢，但我尝试了不同的东西，这是我最后一个。

希望得到您的帮助。感谢您的时间。我很感激。

【问题讨论】：

有什么问题？

标签： javascript for-loop slice

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

您不应为此使用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)

【讨论】：