javascript div中的文字限制字符，添加“阅读更多”链接并在单击链接时显示所有字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23170581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text in div limited characters, add "Read more" link and show all characters when link is clicked
提问by Tom Spee
I've a div with text inside that is displayed using PHP & MySQL, the structure is like this:
我有一个里面有文本的 div 使用 PHP & MySQL 显示，结构是这样的：
<div class="description">
<p>
Here is a lot of text.
</p>
</div>
I want to display a "Read more" link when the text inside the p-tag is more than 100 characters. I can display the "Read more" link with PHP like this:
当 p-tag 内的文本超过 100 个字符时，我想显示“阅读更多”链接。我可以像这样用 PHP 显示“阅读更多”链接：
// strip tags to avoid breaking any html
$string = strip_tags($string);
if (strlen($string) > 100) {
// truncate string
$stringCut = substr($string, 0, 100);
// make sure it ends in a word so assassinate doesn't become ass...
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="/this/story">Read More</a>';
}
echo $string;
The problem is that when the link is clicked I want to show all of the text in the same DIV. Is this possible with PHP or do I need jQuery or something?
问题是，当点击链接时，我想在同一个 DIV 中显示所有文本。这可以用 PHP 实现还是我需要 jQuery 或其他东西？
采纳答案by Thomas
If you want to show the full text without a page reload you will have to use javascript/jquery. For that to work the full text has to be in the generated HTML.
如果您想在不重新加载页面的情况下显示全文，则必须使用 javascript/jquery。为此，全文必须在生成的 HTML 中。
I did this by using 2 divs, one with the shortened text and one with the full text which is hidden by default. When 'read more' is clicked I toggle both divs and change the link label to something like 'see less'.
我通过使用 2div秒来做到这一点，一个是缩短的文本，另一个是默认隐藏的全文。单击“阅读更多”时，我会同时切换divs 并将链接标签更改为“少看”之类的内容。
You could also put the not-shortened text as well as the ellipsis in an element like so:
您还可以将未缩短的文本以及省略号放在元素中，如下所示：
<div class="readmore">
This is the shortened text<span class="ellipsis">...</span> <span class="moreText">with the full text hidden</span> <a class="more" href="#">read more</a>
</div>
See this fiddle.
看到这个小提琴。
回答by Pooja
You can do this as
你可以这样做
<script type="text/javascript">
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
<style type="text/css">
.show-read-more .more-text{
display: none;
}
</style>
<div class="show-read-more">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
Please see this link Show read more link if the text exceeds a certain length using jQuery
如果使用 jQuery 的文本超过一定长度，请参阅此链接显示阅读更多链接
Hope this is what you are looking for.
希望这是你正在寻找的。
