/背景知识/

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. Gson序列化对象时排除字段

    import com.google.gson.ExclusionStrategy; import com.google.gson.FieldAttributes; /** *Gson序列化对象排除属性 ...

  2. VS2010调试小技巧

    在VS下做开发的时候我们进行调试的时候路径是这个样子的:http://localhost:端口号/项目名称/index.aspx 但是发布到服务器上面的时候却是这个样子的:http://www.xxx ...

  3. 深入浅出 RPC - 深入篇

    <深入篇>我们主要围绕 RPC 的功能目标和实现考量去展开,一个基本的 RPC 框架应该提供什么功能,满足什么要求以及如何去实现它? RPC 功能目标 RPC 的主要功能目标是让构建分布式 ...

  4. openOffice安装

    [root@rusky openOffice]# tar -zxvf OOo_3..0_Linux_x86_install-rpm-wJRE_zh-CN.tar.gz [root@rusky open ...

  5. NUnit单元测试初试

    创建项目,创建几个方法 创建测试类 开启NUnit测试工具,新建一个测试项目 打开测试的程序集 选择节点,点击测试,绿色通过,红色说明有错误

  6. c笔试题（1）

    1.sizeof和strlen的区别 #include<stdio.h> #include<string.h> int main() { char a[10] = " ...

  7. 【回忆1314】回忆之placeholder

    直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charse ...

  8. 百度PHP实习一面面试题－算法－二维有序矩阵的查找

    题目描述 有一个二维矩阵,每一行的元素,从左到右保持严格递增,每一列的元素,从上到下保持严格递增.查找给定元素elem,返回NULL或元素位置. 1 3 7 15 16 2 5 8 17 19 3 6 ...

  9. pyqt5和qt-designer结合

    在ubuntu中我们安装了python3-pyqt5这个包后就可以用pyqt5编程了,但是只能用纯代码写窗体,很麻烦.我们要用qt-designer来设计窗体. 我们通过新立得安装qt4-design ...

  10. C 带指针样式的时钟

    #include <stdio.h> #include <malloc.h>#include<graphics.h>#include<conio.h> ...