div/段落标签中的最大字符数[关闭]

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 reprehenderit 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>';
  }
}

---

仅供参考

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

CSS方式：

你可以通过纯 CSS 来实现：

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

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

请注意，它不会限制浏览器只能输入 300 个字符。它只会填满盒子。

Answer 2

你好，你可以试试这样......

检查 div 的长度，如果 >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);
}