Javascript 以div限制字符表示的文本，添加"；阅读更多“；链接并在单击链接时显示所有字符

我有一个div，里面有文本，使用PHP和MySQL显示，结构如下：

<div class="description">
    <p>
    Here is a lot of text.
    </p>
</div>

// 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;

这里有很多文本。

当p标签中的文本超过100个字符时，我想显示一个“阅读更多”链接。我可以用PHP显示“阅读更多”链接，如下所示：

<div class="description">
    <p>
    Here is a lot of text.
    </p>
</div>

// 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;

//剥离标记以避免破坏任何html
$string=带标签（$string）；
如果（strlen（$string）>100）{
//截断字符串
$stringCut=substr（$string，0100）；
//确保它以一个词结尾，这样刺客就不会变成蠢货。。。
$string=substr（$stringCut，0，strrpos（$stringCut，'））.“…”；
}
echo$字符串；

---

问题是，当点击链接时，我想在同一个DIV中显示所有文本。这在PHP中是可能的，还是我需要jQuery或其他什么？

如果你想在不重新加载页面的情况下显示全文，你必须使用javascript/jQuery。为此，全文必须在生成的HTML中

我使用了2个

div

s来实现这一点，一个带有缩短文本，另一个带有默认隐藏的全文。单击“阅读更多”后，我将切换

div

s，并将链接标签更改为类似“查看较少”的内容

您还可以将未缩短的文本以及省略号放在元素中，如下所示：

<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>

这是缩短的文本。。。隐藏全文

请参阅。

您可以按照

<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>

$（文档）.ready（函数（）{
var maxLength=300；
$（“.show read more”）.each（函数（）{
var myStr=$（this.text（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
}
});
$（“.read more”）。单击（函数（）{
$（this.sides（“.more text”）.contents（）.unwrap（）；
$（this.remove（）；
});
});
.显示阅读更多。更多文本{
显示：无；
}
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。

请查看此链接

---

希望这就是您想要的。

它现在正在工作，我使用了2个div，非常好。仍然想知道是否只有一个div就没有更好的解决方案。我用一个没有重复文本的选项更新了答案。我不记得为什么我没有使用这个，但是如果你有任何问题，就使用第一个选项。