如何截断div中的文本答案

【问题标题】：Howto truncate text in a div如何截断div中的文本
【发布时间】：2011-02-02 09:22:19
【问题描述】：

我想截断帖子的文本。
我使用了一些jquery plugins 来完成此操作，但问题是
首先在客户端加载整个文本，然后加载javascript
执行代码以截断文本，结果是丑陋的
效果，您可以根据毫秒查看整个文本
在它被截断之前在你的连接上。

我也应该在服务器中截断吗？
我正在将 codeigniter 与 wordpress 一起使用，我想使用
the_excerpt 之类的，但它并不优雅。

有什么想法吗？

【问题讨论】：

Limiting number of characters displayed in table cell的可能重复

标签： php javascript jquery text truncate

【解决方案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;
}

【讨论】：

+1 感谢您的回答。这里的事情是我想在截断文本的末尾插入一个“更多”链接。

【解决方案2】：

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

【讨论】：

如果你想限制文本的显示大小，这会变得很困难，例如它需要适合 540 x 300 像素的框，因为换行符和 HTML 格式会影响截断文本的显示方式。
-1 "always" 对于不真实的事情来说是一个强有力的工作。

【解决方案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>

【讨论】：

+1 很好，但是文本的长度不是恒定的，这意味着 100x100 的 div 可以占用 100-120 个字符，具体取决于其中单词的长度。我想使用里面的所有空间div 如果你知道我的意思
好的。那时 toddles2000 显示的 overflow: hidden 方法可能会很有用。问题是如果你可能会看到半个字母被截断，除非你使用 text-align: justify 。您需要非常精确地设置字体大小和行高，以确保它看起来不会有点奇怪。
你说得对，但正如我对蹒跚学步的孩子说的那样，我还想在文本末尾添加一个“更多”链接，所以这并不容易。
查看我的新编辑，让我知道这是否更符合您的要求。

【解决方案4】：

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

如果您需要，这将允许您拥有“阅读更多”链接。

不利的一面是，如果它是一大块文本，浏览器仍然会加载它。

【讨论】：

【解决方案5】：

在服务器端的 php 中尝试以下操作：

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

【讨论】：

【解决方案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);

【讨论】：