/背景知识/

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. monkeyrunner总结

    device=MonkeyRunner.waitForConnection()   //手机连接 result = device.takeSnapshot()    //截图 result.write ...

  2. android requestDisallowInterceptTouchEvent用途

    ViewPager来实现左右滑动切换tab.假设tab的某一项中嵌入了水平可滑动的View就会让你有些不爽,比方想滑动tab项中的可水平滑动的控件,却导致tab切换. 由于Android事件机制是从父 ...

  3. mysql中DES加密解密

      DES_DECRYPT(crypt_str[,key_str]) 使用DES_ENCRYPT()加密一个字符串.若出现错误,这个函数会返回 NULL. 注意,这个函数只有当MySQL在SSL 的支 ...

  4. 关于ajax网络请求的封装

    // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求        if (obj.dataType == "jsonp") ...

  5. 页面传值中get和post区别

    get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应. post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到 ...

  6. Android-应用的本地化及知识拓展之配置修饰符

    步骤很简单,只需要两步: 1.创建带有目标语言的配置修饰符的资源子目录 2.将可选资源放入该目录下,android系统会自动处理后续工作 在这里我们需要讲解一下配置修饰符. 中文的配置修饰符:-zh, ...

  7. arcmap从excel坐标数据生成点shp文件

    概述 今天试图在ArcMap中将excel数据转成点文件,在"Display XY Data"的时候,无法选择X,Y字段,很是纳闷,原来Excel中列的格式是文本,导致无法选择.有 ...

  8. iOS_SN_CoreData(二)

    上一篇是讲怎么进行CoreData的基本操作,这一篇是讲NSFetchedResultsController得到CoreData数据怎么与tableView完美结合,和动画操作的实现. NSFetch ...

  9. java泛型方法

    Tool.java package cn.stat.p9.fanxing.demo; public class Tool<QQ> {//不确定类型时可以用泛型 private QQ q; ...

  10. Spring MVC异常处理

    Spring Mvc 中异常处理,一般有两种解决办法: 一.利用org.springframework.web.servlet.handler.SimpleMappingExceptionResolv ...