Question

我想截断帖子的文字。
我使用了一些jquery plugins来实现这一目标，但问题是
首先整个文本加载在客户端上，然后是javascript
执行代码截断文本，结果有一个丑陋的效果，你可以看到millisecons的全文取决于在你的连接被截断之前。

我是否应该在服务器中截断？
我正在使用带有wordpress的codeigniter，我想使用
the_excerpt或者其他东西，但它不优雅。

有什么想法吗？

Answer 1

如果您要截断文本，因为您只想为UI目的设置高度，一个简单的解决方案是将您的内容包装在div中，设置高度并使用overflow：hidden来隐藏其余内容。这样做的好处在于您也可以使用css选择器扩展内容。

html page
<div class="mywrapper">your content goes here..</div>

css file
.mywrapper {
 overflow: hidden;
 width: 540px;
 height: 300px;
}

Answer 2

应始终在服务器上截断文本。特别是如果它们是文本的大部分。

Answer 3

substr_replace将为您完成此任务

http://php.net/manual/en/function.substr-replace.php

- 由于新信息而编辑 -

好的，我认为这就是你之后的事情：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Temp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#clippedmore a').click(function(){
          $('#clipped').css('height','auto');
          $('#clippedmore').hide();
        });
      });
    </script>
    <style style="text/css">
      #clipped { height: 80px; overflow: hidden; }
    </style>
  </head>

  <body>
    <div id="clipped">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="clippedmore">
      <p><a href="javascript:;">Show more...</a></p>
    </div>
  </body>

</html>

Answer 4

在服务器端的php中尝试以下内容：

$test = 'something';
if(strlen($test)>12) {
    echo substr($test,0,12)."...";
} else {
    echo $test;
}

Answer 5

如果您需要更多链接，可以使用此jQuery插件：Bodacity

如果您需要，可以使用“阅读更多”链接。

缺点是，如果它是一大块文本，浏览器仍会加载它。

Answer 6

好吧，这就是我放在一起的东西，它似乎正在起作用：

function truncate_html($s, $l, $e = '&hellip;', $isHTML = true) {
$s = trim($s);
$e = (strlen(strip_tags($s)) > $l) ? $e : '';
$i = 0;
$tags = array();

if($isHTML) {
    preg_match_all('/<[^>]+>([^<]*)/', $s, $m, PREG_OFFSET_CAPTURE | PREG_SET_ORDER);
    foreach($m as $o) {
        if($o[0][1] - $i >= $l) {
            break;                  
        }
        $t = substr(strtok($o[0][0], " \t\n\r\0\x0B>"), 1);
        if($t[0] != '/') {
            $tags[] = $t;                   
        }
        elseif(end($tags) == substr($t, 1)) {
            array_pop($tags);                   
        }
        $i += $o[1][1] - $o[0][1];
    }
}
$output = substr($s, 0, $l = min(strlen($s), $l + $i)) . (count($tags = array_reverse($tags)) ? '</' . implode('></', $tags) . '>' : '') . $e;
return $output;

}

truncate_html('<p>I really like the <a href="http://google.com">Google</a> search engine.</p>', 24);

如何截断div中的文本

6 个答案: