7

我已经创建了一个“新系统”，我希望主页上每篇新闻文章最多显示 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**...阅读更多**

提前致谢！！

4

2 回答 2

25

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 个字符。它只会填满盒子。

于 2013-10-17T11:35:34.653 回答
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);
}
于 2013-10-17T11:42:20.847 回答