Howto truncate text in a div
I want to truncate the text of my post.
I used some jquery plugins to accomplish that but the problem is that first the whole text loads on the client and then the javascript executes the code to truncate the text and in result there is an ugly effect where you can see the whole text for millisecons depending on your connection before it get's truncated.Should i truncate also in the server?
I'm using codeigniter with wordpress and i thought of using the_excerp开发者_如何学Pythont or something but it is not elegant.Any ideas?
If you are truncating the text because you want a set height for UI purpose only, a simple solution would be to wrap your content in a div, set the height and use overflow:hidden to hide the rest. This has the advantage in that you can expand the content using css selectors also.
html page
<div class="mywrapper">your content goes here..</div>
css file
.mywrapper {
overflow: hidden;
width: 540px;
height: 300px;
}
Truncating text should always be done on the server. Specially if they are large portions of text.
substr_replace will accomplish this for you
http://php.net/manual/en/function.substr-replace.php
-- edit due to new info --
Ok, I think this is what you're after then:
<!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>
It could be possible to use this jQuery plugin if you need the more link: Bodacity
This will allow you to have a "Read More" link if you so need it.
On the downside, if it is a big chunk of text the browser will still load it.
Try the following in php on the server side:
$test = 'something';
if(strlen($test)>12) {
echo substr($test,0,12)."...";
} else {
echo $test;
}
Alright so this is what I put together and it seems to be working:
function truncate_html($s, $l, $e = '…', $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);
加载中,请稍侯......
精彩评论