2011-02-02 104 views
1

我想截斷我的文章的文本。
我使用了一些jquery plugins來實現這一目標,但問題是
首先使全文負載在客戶端上,然後將JavaScript的
執行代碼截斷文本和結果有一個醜陋
影響您可以在連接被截斷前在連接上看到關於毫秒的整個文本,具體取決於您的連接上的
如何截斷文本中的文本

我應該截斷也在服務器?
我使用codeigniter wordpress和我想使用
the_excerpt什麼的,但它不是優雅的。

任何想法?

+0

可能重複(HTTP:/ /stackoverflow.com/questions/4541412/limiting-number-of-characters-displayed-in-table-cell) – Gordon 2011-02-02 09:37:06

回答

0

這可能是可能的,如果你需要更多的鏈接使用這個jQuery插件:Bodacity

這將允許你如果您需要它,請點擊「閱讀更多」鏈接。

缺點是,如果它是一大塊文本,瀏覽器仍然會加載它。

4

截斷文本應始終在服務器上完成。特別是如果它們是文本的大部分。

+0

如果你想限制文本的顯示大小,這變得困難eg它需要放入540 x 300px的盒子中,因爲換行符和HTML格式將在截斷文本的顯示方式中發揮作用。 – Jimbo 2012-12-08 06:59:15

+0

-1「總是」對於那些不正確的事情來說是一件有力的工作。 – 2014-01-29 15:50:21

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> 
+0

+1這很好,但文本的長度不是固定的,這意味着100x100 div可以讓我們說100-120個字符,這取決於它內部的單詞長度。我想要使用div內的所有空間,如果你知道我是什麼意思是 – 2011-02-02 09:33:19

9

如果因爲只想爲UI設置高度而截斷文本,一個簡單的解決方案就是將您的內容封裝在div中,設置高度並使用ov erflow:隱藏其餘部分。這樣做的好處是您可以使用css選擇器來擴展內容。

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

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

嘗試在服務器端PHP中的以下內容:

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

好吧,所以這是我放在一起,它似乎是工作:

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);