div /段落代码中的最大字符数 [英] Maximum amount of characters in a div/paragraph tag

问题描述

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

我不知道它叫什么，我只能通过谷歌搜索找不到我的问题的答案。我找到了类似的问题，例如：限制一个div中的字符数没有特定的类但它不完全适合我的问题。

这里是一个例子： p>

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

$

感谢提前!!

解决方案

jQuery方式：

只输入300个字符，那么您必须使用jQuery框架或纯JavaScript。

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

  var myDiv = $（'＃your-div-id'）; 
 myDiv.text（myDiv.text（）。substring（0,300））
  

/ p>

纯JavaScript方式：

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

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

。

---

。

添加阅读更多 end：

如果您想在每个子字符串段落的末尾添加 Read More ，那么您需要使用纯JavaScript或jQuery方法：

jQuery方法：

 code> var myDiv = $（'＃your-div-id'）; 
 myDiv.text（myDiv.text（）。substring（0,300）+'< a href =＃>阅读更多< / a>'）
  / pre> 
 
 
。
 
 
 
 纯JavaScript方式： 
 $ b 
  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 =＃>阅读更多< / a>'; 
} 
} 
  
 
 
 
 
 
 
 。
 
 
 
 FYI 
 
 
 
此外，还有一种纯CSS方法来对框中的文本进行子字符串，手动设置字符限制：
 
 
 
  CSS方式：
 
 
 
纯CSS：
 ＃your-div {
 text-overflow：ellipsis; 
} 
  
它会自动剪切文本并放置 ... 
 请注意，它不会限制浏览器只能输入300个字符。它将只填满盒子。 
 
I've created a 'New system' and I'd like the home page to show up to 300 characters per news article, and add an hyperlink "Read more" automatically at the end of the 300 characters (if needed). However, how would I do this?

I do not know what it is called and I couldn't find an answer on my question by just googling. I did find similair questions, like: Limiting the no of characters in a div has specific class But it doesn't completely fit my question.

Here is an example what it should look like:

  
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*...Read more*
Thanks in advance!!
解决方案
jQuery way:

If you want to put only 300 characters, then you must use jQuery framework or pure Javascript.

Note: just change #your-div-id and put your div ID.
var myDiv = $('#your-div-id');
myDiv.text(myDiv.text().substring(0,300))
.

Pure JavaScript way:

Note: just change #your-div-id and put your div ID.
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);
  }
}
.



.

Add Read More at the end:

if you want to add Read More at the end of each substringed paragraph, then you need to use pure Javascript or jQuery ways:

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

Pure JavaScript way:
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

Also there is a pure CSS way to substring text in box, but it has no option to manually put character limit:

CSS way:

You can achieve this by pure CSS:
#your-div {
  text-overflow:ellipsis;
}
it will automatically cut text and put ... at the end of the box.

Please note, that it will not restrict browser to put only 300 characters. It will just fill the box.

                        
这篇关于div /段落代码中的最大字符数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！