/背景知识/

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

参数描述

start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。

如果 start 或 end 为负数，那么它将被替换为 0

/实际应用：截取字符串多出来并用省略号[...]显示/

在线演示：http://codepen.io/anon/pen/yNXyMX

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>js 截取字符串多出来并用省略号...显示</title>

	<style type="text/css">

	.content{

		width: 200px;

	        margin: 100px auto;

		padding: 15px;

		background-color: orange;

		color: #fff;

	}

	.btn {

	  float: right;

	  background-color: #fff;

	  color: #333;

	  font-size: 12px;

	  padding: 4px 8px;

	  border-radius: 3px;

	  margin-top: 5px;

	  text-shadow: 0 0 1px rgba(0,0,0,.25);

	  box-shadow: 0 0 1px rgba(0,0,0,.25);

     }

.move{

	 -webkit-transition:all ease-in-out .35s;

	 transition:all ease-in-out .35s;

	 -webkit-animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);

         animation:showIn 1.4s cubic-bezier(0, 0, 0.2, 1);

         -webkit-animation-fill-mode: backwards;

         -moz-animation-fill-mode: backwards;

         -o-animation-fill-mode: backwards;

          animation-fill-mode: backwards;

     }

@keyframes showIn{

    0%{ opacity: .5;}

    60%{transform: scale(1.2);}

    100% { -o-transform: scale(1.0);opacity: 1.0;}

    }

@-webkit-keyframes showIn{

    0%{ opacity: .5;height: 20%;}

    60%{-webkit-transform: scale(1.2);}

    100% { -webkit-transform: scale(1.0);opacity: 1.0;}

   }

	</style>

</head>

<body>

<div class="content">

 <span>

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。

如果 start 或 end 为负数，那么它将被替换为 0

</span><span class="btn">收缩</span>

</div>

<script type="text/javascript">

	var oDiv=document.getElementsByTagName('div')[0];

	var arr_span=document.getElementsByTagName('span');

        var str=arr_span[0].innerHTML;

	var onOff=true;

       arr_span[1].onclick=function(){

    	if(onOff){

        arr_span[0].innerHTML=str.substring(0,43)+'...';

    	arr_span[1].innerHTML='展开';

    	oDiv.classList.add('move');

    	onOff=false;

    	}else{

    	arr_span[0].innerHTML=str;

    	arr_span[1].innerHTML='收缩';

    	oDiv.classList.remove('move');

    	onOff=true;

    	}

    }

</script>

</body>

</html>

　　

Javascript: 截取字符串多出来并用省略号[...]显示的更多相关文章

  1. javascript截取字符串(支持中英文混合)

    javascript截取字符串(支持中英文混合) <script type="text/javascript"> var sub=function(str,n){ va ...

  2. Js自动截取字符串长度，添加省略号“……”

    JavaScript字符串处理函数,根据定义的长度截取字符串,超出部分裁掉追加……,很多时候网页上显示的内容需要缩成“...”该方法用于处理字符串显示固定长度,超长部分用“...”代替: /**参数说 ...

  3. javascript截取字符串的最后几个字符

    在JavaScript中截取字符串一般是使用内置的substring()方法和substr()方法,这两个方法功能都很强大,也都能实现截取字符串中的最后几个字符. substring()方法 Java ...

  4. CSS截取字符串，额外的文本显示以省略号

    最近的诀窍css还有这么叼炸天的侧~~~ 善待似论坛页面,头像70px,但username不限啊,English中国能够.你说如果他采取"我的名字是这么长啊.你该怎么办呢".那老和 ...

  5. 算法:javascript截取字符串

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  6. javascript截取字符串长度

    <html> <head> <meta charset="UTF-8"/> <title>截取字串长度</title> ...

  7. eshop截取字符串长度 和去掉省略号

    <!-- {if $goods.goods_brief} --> {$goods.goods_brief|truncate:17}<!-- {/if} --> 去掉省略号: 找 ...

  8. JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用

    //截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...

  9. vue 引用公共方法（例子：截取字符串固定字数，其余显示...）

    1.写公共js 2.main.js引入公共js 3.在组件中用this.common.方法名 引用

随机推荐

  1. ZOJ 3511 不相交切切多边形 线段树求最大边数

    题意: n多凸边形 m刀 (把n切m刀,问切完后的图形中 最多的边数 是多少) 切a点-b点 数据保证切的刀不会相交 思路: 2点之间的剩余点数就是边数, 把a-b距离 近 排序 切完一刀就统计一下切 ...

  2. iOS 音频开发经验汇总

    一.音乐播放类概念 iOS 下能支持歌曲和声音播放的的类有几个: SystemSound AVFoundtion库中的AVAudioPlayer #重要 MediMPMusicPlayerContro ...

  3. Python序列的方法（转）

    在快速教程中,我们了解了最基本的序列(sequence).回忆一下,序列包含有定值表(tuple)和表(list).此外,字符串(string)是一种特殊的定值表.表的元素可以更改,定值表一旦建立,其 ...

  4. （转）使用 .NET 的 RNGCryptoServiceProvider 生成随机数

    1. [代码]一个简单的方法,但不够可靠     跳至 [1] [2] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 static void Main(string[] args) ...

  5. C# TextBox控件 显示大量数据

    串口通信:在使用TextBox空间显示数据时,因为要显示大量的接收到的数据,当数据量大且快速(串口1ms发送一条数据)时,使用+=的方式仍然会造成界面的卡顿(已使用多线程处理),但使用AppendTe ...

  6. O、Ω、Θ表示

    转载,原网址为:http://book.2cto.com/201211/8127.html 对于任何数学函数,这三个记号可以用来度量其“渐近表现”,即当趋于无穷大时的阶的情况,这是算法分析中非常重要的 ...

  7. hdu 4277 USACO ORZ (暴力+set容器判重)

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. spark1.3.1使用基础教程

    spark可以通过交互式命令行及编程两种方式来进行调用: 前者支持scala与python 后者支持scala.python与java 本文参考https://spark.apache.org/doc ...

  9. 对于js原型和原型链继承的简单理解（第三种，复制继承）

    复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...

  10. amchart

    amchart能够根据提供的数据便捷的生成好看的图标,曾在项目中遇到使用falsh版以支持对js支持不好的低版本浏览器,但是现在官网上都是js版本的,flash版的文档都没有,搜索结果一般都是链接到博 ...