缩短文本以添加阅读更多链接答案

【问题标题】：Shorten text to add read more link缩短文本以添加阅读更多链接
【发布时间】：2015-06-15 11:16:44
【问题描述】：

我有以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestPost</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="more.js"></script>
</head>
<body>
   <div class="post1">
   This is post one
    </div>
    <div class="post1">
    Another post number one
    </div>
    <div class="post2">
    And this is post two
    </div>
    <div class="post3">
    Last but not least, post three
    </div>
</body>
</html>

我正在寻找的是以下内容：当 div 中的文本较长时，比如说 5 个字符，它应该将其截断并添加...阅读更多（包括指向页面的链接）。

我尝试了一些 PHP 和一些 JQuery，但老实说，我不知道该用什么了。

如果我能得到答案，那就太好了，但也非常感谢朝着正确的方向前进：)

编辑：添加第二个帖子 1 是为了供任何想知道的人进行测试。

【问题讨论】：

你到底尝试了什么？在 PHP 中可以使用 strlen&substr，在 JS 中类似。
Id post1 你用了两次为什么？？？
向我们展示您在 PHP 和 JavaScript 中的尝试。简而言之，如果您想要“阅读更多”按钮立即显示其余内容，JavaScript 可能是正确的解决方案。当它刚刚显示，并且“阅读更多”导致不同的页面时，我会使用 PHP。
你的 HTML 也是无效的，你不能有两次相同的 ID。
这没有回答问题，但从语义的角度来看，如果您列出内容，您应该使用列表标签，<ol> 或 <ul>。也就是说，要回答你的问题，我会看看this library，它具有做这个客户端的优势，因此在不同设备之间提供更好的用户体验（你可能希望在桌面上显示比移动设备更多的文本...)

标签： php jquery html

【解决方案1】：

使用属性class 而不是id。将id='post' 替换为class='post'

将此代码用于您的more.js

var mess_content = $('.post');
mess_content.each(function(){
   if ($(this).text().length > 120) {
      var obrtext = $(this).text().substr(0,120) ;
      $(this).html(obrtext+"<a href='#'>read more</a>") ;
   }
});

【讨论】：

谢谢！到目前为止，这对我有用，我只需要在阅读更多内容中添加一些内容，将其链接到不同的页面。
我也试过了，但输出是文本。不知道如何将其更改为有效链接：x 因为当您删除锚标记两侧的 " 时，处的 / 会搞砸。
把最后一个text()改成html()

【解决方案2】：

要使用 PHP 执行此操作，当您输出文本时，请通过如下所示的缩短函数运行它：

function shorten($output, $limit = 5) {
  $output = htmlspecialchars($output, ENT_QUOTES, 'UTF-8');
  if (strlen($output) > $limit) {
    $output = substr($output, 0, $limit) . ' <a href="#">... read more</a>';
  }

  echo $output;
}

你可以像这样使用它：

<div id="post1">
    <?php shorten('This is post one'); ?>
 </div>

【讨论】：

如果帖子的内容包含 HTML 标签，这可能会给您带来麻烦。
还是不对。您也在转义您注入的代码（<a href... 部分）。首先转义，然后添加 HTML。但是htmlspecialchars 也会让它变得混乱。
奇怪，我得到这个作为输出： $limit) { $output = substr($output, 0, $limit) 。 ' ... 阅读更多'; } 回声$输出； } ?> 但这可能是我做错了什么？
更新您的问题，以便我了解您的使用情况。
Nvm，我不知道为什么它不起作用，但现在它起作用了！但是还有一种方法可以在 php 中选择一个 div id/class 来使用代码，而不必在文本周围插入 php？