div / paragraph标记中的最大字符数

Question

我创建了一个'新系统'，我希望每个新闻文章最多显示300个字符的主页，并在300个字符的末尾自动添加超级链接“阅读更多”（如果需要） 。但是，我该怎么做？

我不知道它叫什么，我只是通过谷歌搜索找不到我的问题的答案。我确实找到了类似的问题，例如：Limiting the no of characters in a div has specific class但它并不完全适合我的问题。

以下是一个示例：

  

Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cil ** ...阅读更多**

提前致谢!!

Answer 1

jQuery方式：

如果你只想放300个字符，那么你必须使用jQuery框架或纯Javascript。

注意： 只需更改#your-div-id并输入您的div ID。

var myDiv = $('#your-div-id');
myDiv.text(myDiv.text().substring(0,300))

纯JavaScript方式：

注意： 只需更改#your-div-id并输入您的div ID。

var i;
var divs = document.getElementById('#your-div-id');
for(i=0;i<divs.length;i++) {
  if(divs[i].className == 'myclass') {
    divs[i].innerHTML = divs[i].innerHTML.substring(0,300);
  }
}

---

在最后添加Read More：

如果你想在每个子段落的末尾添加Read More，那么你需要使用纯Javascript或jQuery方式：

jQuery方式：

var myDiv = $('#your-div-id');
myDiv.text(myDiv.text().substring(0,300) + '<a href="#">Read more</a>')

纯JavaScript方式：

var i;
var divs = document.getElementsById('#your-div-id');
for(i=0;i<divs.length;i++) {
  if(divs[i].className == 'myclass') {
    divs[i].innerHTML = divs[i].innerHTML.substring(0,300) + '<a href="#">Read more</a>';
  }
}

---

FYI

还有一种纯CSS方法可以在框中对子文字进行子串，但是没有选项可以手动设置字符限制：

CSS方式：

你可以通过纯CSS来实现这个目标：

#your-div {
  text-overflow:ellipsis;
}

它会自动剪切文本并将...放在框的末尾。

请注意，它不会限制浏览器只能放置300个字符。它只会填满这个框。

Answer 2

嗨，你可以尝试这样....

检查div的长度，如果＆gt; 300创建子字符串并使用substring +“...”生成div内容。 向div添加一个带有侦听器的链接，该侦听器将div的所有内容替换为原始内容，或者只添加指向完整文章的链接。

var str = $('#mydiv').text();
if(len>300){
  var new_str = str.subtstr(0,300); 
  new_str += '<div data="'+str+'">' +  new_str + '... </div>';

  var newDiv = $(new_str);
  var link_read_more = $('<a class="read_more">Read more</a>');
  link_read_more.click(function(){
    var originaltext = $(this).parent().attr('data');
    $(this).parent().html(originaltext);
  });
  newDiv.append(link_read_more);
}