视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
php,js,css字符串截取的办法集锦_javascript技巧
2020-11-27 21:27:30 责编:小采
文档


可能没什么含量,求少拍砖。
首先是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 的开始位置到结尾的字串。
例子:

代码如下:
输出:lo world!
从原字符串第三位开始,到末尾

代码如下:
输出:lo w
从原字符串第四位开始,到第七位

代码如下:
输出:lo world!
第三位开始到结尾

代码如下:
输出: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 | ]

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开发者网站的图例就明白了。在这里就不多说了。

下载本文
显示全文
专题