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

Question

我创建了一个“新系统”，希望主页能够显示每篇新闻文章的300个字符，并在300个字符后自动添加超链接“阅读更多”（如果需要）。但是，我不知道这被称为什么，也无法通过谷歌找到答案。我确实找到了类似的问题，例如：限制具有特定类的div中的字符数，但它并不完全符合我的问题。

以下是示例：

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**...阅读更多**

提前感谢您！

- Stefan R

---

你从链接中无法理解什么？ - Praveen

你提供的上述链接是使用jQuery编写的函数。 - Saranya Sadhasivam

要么按照其他问题中所做的那样，要么使用类似于 https://github.com/epeli/underscore.string prune 或 https://gist.github.com/mseeley/1637329 的东西。 - megawac

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);
  }
}

---

在末尾添加“阅读更多”：

如果你想在每个被截取的段落末尾添加“阅读更多”，那么你需要使用纯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个字符。 它只会填充框。

- zur4ik

---

+1为完整的回答提供代码启动。虽然CSS的答案并不是他问题的真正答案。 - TigOldBitties

@TigOldBitties 我同意你的观点，只是列举了所有可能的方法，以便更好地理解 stefan1294。 - zur4ik

非常感谢！我无法得到更好的答案。 - Stefan R

据我所知，在原生JavaScript中没有document.getElementsById。但是有document.getElementById()，它返回具有该ID的单个元素，因为ID应该是唯一的。 - Mohammed Shareef C

@MohammedShareefC 是的，你说得对。这是类型错误。已更新。谢谢。 - zur4ik

Answer 2

你可以尝试以下方法...

检查div的长度，如果大于300，则截取子字符串并将div内容设置为substring + "..."。 向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);
}

- Valerio Cicero