首页 后端开发 php教程 文字长度超过一定量,则截断展示'更多”点击查看剩余内容,不超不显示

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

Jun 13, 2016 am 11:13 AM
css gt lt nbsp string

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


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

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

        function limitwords($string, $limit = 250) {<br />		if(strlen($string) &lt; $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给你吧,很简单的
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<br />&lt;title&gt;无标题文档&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div style="width:200px; height:200px; border:#999 1px solid; overflow:hidden; float:left;" id="more1"&gt;测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容&lt;/div&gt;&lt;span onclick="document.getElementById('more1').style.height='auto'"&gt; 显示更多&lt;/span&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;
登录后复制

------解决方案--------------------
不要用后台php来截取,那样的话还要考虑utf-8,麻烦。
直接完整数据传给前段,前段通过css设置,即可截断并用“更多”显示。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

vue中placeholder是什么意思

vue中空格怎么写 vue中空格怎么写 Apr 30, 2024 am 05:42 AM

vue中空格怎么写

js中span是什么意思 js中span是什么意思 May 06, 2024 am 11:42 AM

js中span是什么意思

vue中怎么获取dom vue中怎么获取dom Apr 30, 2024 am 05:36 AM

vue中怎么获取dom

js中rem是什么意思 js中rem是什么意思 May 06, 2024 am 11:30 AM

js中rem是什么意思

vue中引入图片的方法 vue中引入图片的方法 May 02, 2024 pm 10:48 PM

vue中引入图片的方法

span标签的作用是什么 span标签的作用是什么 Apr 30, 2024 pm 01:54 PM

span标签的作用是什么

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件是什么语言写的

See all articles