php,js,css字符串截取的办法集锦


Posted in Javascript onSeptember 26, 2014

可能没什么含量,求少拍砖。
首先是PHP版本的。

<?php echo mb_strimwidth("这里是内容", 0,3,"...","utf-8"); ?>

 其实只用mb_strimwidth一个函数就可以了,该函数的说明如下:
mb_strimwidth — 获取按指定宽度截断的字符串
string mb_strimwidth ( string $str , int $start , int $width [, string $trimmarker = "" [, string $encoding = mb_internal_encoding() ]] )
 参数说明:
$str 为要截断的字符串(即原字符串,输出的字符串)
$start 从第几个字符开始截取,默认是0
 $width 所需修剪的宽度
$trimmarker 截取后,在字符串末尾添加的内容(常见的为...表示省略),默认我i空
$encoding 这个参数很重要,如果字符串是中文,一定要加上。否则。。。。就可以看到“�”这东西了,以前没仔细看过这个函数,在wordpress主题里因为要显示文章的一小段内容,然后末尾就有乱码了,很久都不知道为什么。另外这个参数应该是跟网页的编码格式一致的,个人测试的时候网页编码utf-8,参数写为gbk的时候汉字就shit了。。(求大牛解释)
php版本的就这样了,有时候以为是php语言的问题,其实只是我们没仔细研究它。

js版本的:

substring()和substr()方法,两个方法*几乎*没区别,
substring()方法的第一个参数必填,为要提取的子串的第一个字符在 字符串 中的位置,第二个参数可选,是要提取的子串的最后一个字符在 stringObject 中的位置多 1位,默认无,到字符串末尾。
substr()第一个参数必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。第二个参数为可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。
例子:

    <script type="text/javascript">

    var str="Hello world!"

    document.write(str.substring(3))

    </script>

这个例子输出:lo world!
从原字符串第三位开始,到末尾

<script type="text/javascript">

    var str="Hello world!"

    document.write(str.substring(3,7))

    </script>

这个例子输出:lo w
从原字符串第四位开始,到第七位

<script type="text/javascript">

    var str="Hello world!"

    document.write(str.substr(3))

    </script>

输出:lo world!
第三位开始到结尾

<script type="text/javascript">

    var str="Hello world!"

    document.write(str.substr(3,7))

    </script>

输出:lo worl
从第四位开始,截取7位。

 JS这两个方法可以看
http://www.w3school.com.cn/js/jsref_substring.asp
http://www.w3school.com.cn/jsref/jsref_substr.asp

第三个就是CSS的了
CSS截取主要使用text-overflow这个属性。
text-overflow: [ clip | ellipsis | <string> ]

text-overflow默认值为clip ,即当内容超出容器时,会裁切掉超出的文本,值为ellipsis时,会用省略号替代超出的文本;也可以用特定的字符串来替代超出的文本(目前仅 firefox 支持)。

省略号的例子:

.ellipsis{

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }

[copy]参考资料:
http://quirksmode.org/css/user-interface/textoverflow.html
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

 其实css的说明看一下mozilla开发者网站的图例就明白了。在这里就不多说了。

Javascript 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
浅谈javascript中的闭包
May 13 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
js实现小星星游戏
Mar 23 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
javascript中字符串拼接详解
Sep 26 #Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 #Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 #Javascript
前端轻量级MVC框架CanJS详解
Sep 26 #Javascript
alert出数组中的随即值代码
Sep 25 #Javascript
jquery得到iframe src属性值的方法
Sep 25 #Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP文件下载类
2006/12/06 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jquery常用操作小结
2014/07/21 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
初步认识Python中的列表与位运算符
2015/10/12 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Java基础类库面试题
2013/09/04 面试题
函授自我鉴定范文
2014/02/06 职场文书
火锅店营销方案
2014/02/26 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
学生鉴定评语大全
2014/05/05 职场文书
户外亲子活动总结
2015/05/08 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android