/背景知识/

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. 命令行运行android模拟器

    创建模拟器 android create avd --name avd_4.1 --target "android-16" --abi armeabi-v7a Android 4. ...

  2. Socket 理解

    TCP/IP要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协 ...

  3. LDAP索引及缓存优化

    一.设置索引 索引将查找信息和 Directory Server 条目关联起来. Directory Server支持以下几种索引: 1出现索引 (pres) - 列出了具有特定属性的条目,与属性的值 ...

  4. python 下的数据结构与算法---2:大O符号与常用算法和数据结构的复杂度速查表

    目录: 一:大O记法 二:各函数高阶比较 三:常用算法和数据结构的复杂度速查表 四:常见的logn是怎么来的 一:大O记法 算法复杂度记法有很多种,其中最常用的就是Big O notation(大O记 ...

  5. IIS发布程序，出现：请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理解决方案

    windows 7(或者windows 2008)+iis7.5 出现如下错误的解决方法: 错误描述:请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 解决方法: 打开cmd命令窗口,执行如下 ...

  6. vsftpd安装、多用户配置

    1.vsftpd安装 rpm -ivh vsftpd 2.2.2 11.el6_4.1.x86_x64.rpm 2.添加ftp用户 添加ftp用户组 groupadd ftpg 添加ftp用户 use ...

  7. FileStream 操作文件复制

    static void Main(string[] args) { string source = @"D:\c\集合.avi"; string target = @"C ...

  8. ZOJ 1642

    题意:有两个字符串,每个串由n个字符组成,每个字符有一个价值,Roy每次指定串2中的一个字符,他的得分增加的值为这个字符的价值,然后把两个串中这个字符前面的那部分(包括这个字符)删掉,重复进行这样的操 ...

  9. Objective-C中instancetype和id的区别

    要区分instancetype和id,首先要弄清楚什么是关联返回类型(Related Result Type). 关联返回类型即一个方法的返回类型就是调用这个方法的调用者的类型.具有下列条件的方法具有 ...

  10. uva 11038 - How Many O's?

    想法: 將問題簡化為求1~m 0的總數,以及1~n 0的總數,然後最後再相減. 求1~n 0的總數,要將n分別算每個位數0的個數,舉例如30324: 先從右邊第一位'4'開始,其左邊為3032,表示1 ...