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

试试这个：

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

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

每个容器中的切片文字

2 个答案: