文字长度超过一定量,则截断展示“更多”点击查看剩余内容,不超不显示

WBOY

リリース： 2016-06-13 12:54:09

オリジナル

1432 人が閲覧しました

文字长度超过一定量,则截断显示“更多”点击查看剩余内容,不超不显示
文字长度超过一定量,则截断显示“更多”点击查看剩余内容,不超不显示 js php实现的都可以有做过的高手请帮下忙

------解决方案--------------------
中文的话，用mbstring会比较好。
------解决方案--------------------
用php就能解决了。用for循环来截取字符串，条件判断的时候，判断字符是2字节（汉字）还是1字节（字母、数字）就可以了
------解决方案--------------------
function getsre($str,$len){
$strlrn=strlen($str);
if($strlrn return $str;
}else{
rerurn substr($str,0,$len)."...";
}

}//我记得貌似是这样的
------解决方案--------------------
非中文的话好控制，比如这样。

        function limitwords($string, $limit = 250) {<br />
		if(strlen($string) < $limit) {return $string;}<br />
		$regex = "/(.{1,$limit})\b/";<br />
		preg_match($regex, $string, $matches);<br />
		return $matches[1].' more';<br />
	}

ログイン後にコピー

中文的话，用mbstring，而且之前最好要mb_convert_encoding()，统一一下编码。
------解决方案--------------------
用CSS加JS控制就可以了
首先CSS设置一个固定高度，超出隐藏，下面加个更多，点击的时候把这个高度设置为auto就可以了
------解决方案--------------------
css可以操作CSS属性啊，当点击更多的时候把css的高度设置为auto就显示了
------解决方案--------------------
我写个DEMO给你吧，很简单的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>无标题文档</title><br />
</head><br />
<body><br />
<div style="width:200px; height:200px; border:#999 1px solid; overflow:hidden; float:left;" id="more1">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</div><span onclick="document.getElementById('more1').style.height='auto'"> 显示更多</span><br />
</body><br />
</html>

ログイン後にコピー

------解决方案--------------------
不要用后台php来截取，那样的话还要考虑utf-8，麻烦。
直接完整数据传给前段，前段通过css设置，即可截断并用“更多”显示。