Question

我有以下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，但说实话，我不确定再使用什么。

如果我能得到答案，那将是非常棒的，但是对正确方向的推动也将非常受欢迎：）

编辑：第二个post1被添加用于测试任何想知道的人。

Answer 1

要使用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>

Answer 2

使用属性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>") ;
   }
});

缩短文字以添加阅读更多链接

2 个答案: