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

可能没什么含量,求少拍砖。
首先是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开发者网站的图例就明白了。在这里就不多说了。

时间: 2024-11-05 14:48:26

php,js,css字符串截取的办法集锦_javascript技巧的相关文章

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

 可能没什么含量,求少拍砖. 首先是PHP版本的.   代码如下: <?php echo mb_strimwidth("这里是内容", 0,3,"...","utf-8"); ?>    其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth - 获取按指定宽度截断的字符串 string mb_strimwidth ( string $str , int $start , int $widt

JS+CSS实现表格高亮的方法_javascript技巧

本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

JS常用字符串处理方法应用总结_javascript技巧

1.indexOf()方法,从前往后查找字符串位置,大小写敏感,从0开始计数.同理,lastIndexOf() 方法从后往前,两个方法对于相同的检索条件输出的结果是一样的 例如: 复制代码 代码如下: <script type="text/javascript"> var str="Hello World!" document.write(str.indexOf("Hello"))//输出0 document.write(str.in

JS+CSS简单树形菜单实现方法_javascript技巧

本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下

js获取字符串字节数方法小结_javascript技巧

本文实例讲述了js获取字符串字节数的方法.分享给大家供大家参考.具体如下: 大家都知道,获取字符串的长度可用length来获取, 那么获取这段字符串的字节数呢? 英文字母肯定lenght和字节数都一样:都是1 而中文lenght=1,字节数=2 因此,需要作的就是把中文字符的字节数计算出来. 方法一: alert('a'.replace(/[^\u0000-\u00ff]/g,"aaa").length); //原理:把中文字符替换成2个英文字母,那么字节数就是2, //示例中改成替换

JS+CSS实现闪烁字体效果代码_javascript技巧

本文实例讲述了JS+CSS实现闪烁字体效果的方法.分享给大家供大家参考,具体如下: <div id="blink">闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.spli

JS+CSS实现美化的下拉列表框效果_javascript技巧

本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

JS删除字符串中重复字符方法_javascript技巧

复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var s

神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati