如何在特定数目的单词后截断文本并追加readmore元素？

Question

我想在20个单词（而不是字符）之后截断文本。

我有一个php文件，可从数据库获取内容并将其显示在网站上，其中包含：

<?php
$query = $conn->prepare('SELECT * FROM posts');
$query->execute();
$data = $query->fetchAll();

foreach ($data as $post ) { ?>
    <p class="readmore" data-text="<?php echo $post['text'] ?>" data-link= "<?php echo $post['link'] ?>"></p>
<?php } ?>

然后在Javascript文件中：

window.onload = function(){
    var more = document.getElementsByClassName('readmore');

    for(var i = 0; i < more.length; i++){

        more[i].innerHTML = more[i].getAttribute('data-text').split(" ").splice(0,20).join(" ");

        var data = "<a href='"+more[i].getAttribute('data-link')+"' target='_blank'>Read More</a>";

        more[i].innerHTML += '... ' + data;
    }
}

它可以正常工作，但是要花很多时间才能显示被截断的文本，并在末尾加上readmore锚。

有没有更好更快的方法？