div中的文字限制字符，添加“阅读更多”链接并在单击链接时显示所有字符

Question

我有一个里面有文本的 div 使用 PHP & MySQL 显示，结构是这样的：

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

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

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

Answer 1

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

我通过使用 2div秒来做到这一点，一个是缩短的文本，另一个是默认隐藏的全文。单击“阅读更多”时，我会同时切换divs 并将链接标签更改为“少看”之类的内容。

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

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

看到这个小提琴。